注冊全局組件
<!--注冊全局組件-->
<div id="app">
<!--
組件使用駝峰命名法使用時候需要使用-小寫調用
-->
<my-com1></my-com1>
</div>
<script>
/*
使用Vue.component創建組件，參數1為組件名稱
*/
Vue.component('myCom1', {
//通過template屬性指定組件要展示的html結構
template: '<h3>Vue.extend創建組件</h3>'
})
let vm = new Vue({
el: '#app',
data: {}
})
</script>
<!--注冊全局組件-->
<div id="app">
<mycom1></mycom1>
</div>
<!--在被控制的#app外使用template 元素-->
<template id="temp1">
<div>
<h1>通過template組件</h1>
</div>
</template>
<script>
Vue.component('mycom1',{
template:'#temp1'
})
let vm=new Vue({
el:'#app',
data:{
}
})
</script>
注冊私有組件
<div id="app2">
<login></login>
</div>
<template id="temp2">
<h2>私有組件</h2>
</template>
new Vue({
el:'#app2',
data:{},
methods:{},
filters:{},
directives:{},
components:{ //定義私有組件
login:{
template:'#temp2'
}
},
beforeCreate(){},
created(){},
beforeMount(){},
mounted(){},
beforeUpdate(){},
updated(){},
beforeDestroy(){},
destroyed(){}
})
父組件傳遞值到子組件
<div id="app">
<!--父組件可以在引用子組件時候可以通過屬性綁定的形式，
把需要傳遞給子組件的數組以屬性綁定的形式傳遞-->
<com1 :parentmsg="msg"></com1>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: '123 父組件'
},
methods: {},
components: {
//子組件中默認無法訪問父組件中的data上的數據和methods中的函數
com1: {
/*
組件中的所有props數據都是通過父組件傳遞的
把父組件傳遞的屬性定義好才能使用父組件傳遞參數
props中的數據都是只讀的
*/
props: [
'parentmsg'
],
template: '<h1>子組件--{{parentmsg}}</h1>'
}
}
})
</script>
父組件傳遞函數到子組件
<div id="app">
<!--父組件向子組件傳遞方法使用事件綁定機制-->
<com2 @func="show"></com2>
</div>
<template id="temp1">
<div>
<h1>這是自組件</h1>
<input type="button" value="點擊" @click="myClick" />
</div>
</template>
<script>
let vm = new Vue({
el: '#app',
data: {},
methods: {
show(data) {
console.log(data)
}
},
components: {
com2: {
template: '#temp1',
data() {
return {
son: { name: '張三', age: 123 }
};
},
methods: {
myClick() {
console.log("ok")
//使用emit調用父組件傳遞函數，第一個參數是函數名稱，后邊參數為傳遞的參數
this.$emit('func', this.son)
}
}
}
}
})