8. 組件
8.1 注冊組件
組件的data要用函數(shù)形式
<div id='app'>
<component1></component1>
<component2></component2>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
Vue.component('component2', {
data:function(){
return {
data2:'我是全局注冊的數(shù)據(jù)',
}
},
template:'<div>{{data2}}</div>',
})
var app = new Vue({
el:'#app',
components: {
component1:{
data:function(){
return {
data1:'我是局部注冊的數(shù)據(jù)'
}
},
template:'<div>{{data1}}</div>'
}
}
})
</script>
8.2 父給子組件通信
傳遞靜態(tài)props
<div id='app'>
<my-component title='父組件向子組件傳遞數(shù)據(jù)'></my-component>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
Vue.component('my-component', {
props: ['title'],
template:'<div>{{title}}</div>',
})
var app = new Vue({
el:'#app',
})
</script>
傳遞動態(tài)props
<div id='app'>
<my-component v-bind:title='msg'></my-component>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
Vue.component('my-component', {
props: ['title'],
template:'<div>{{title}}</div>',
})
var app = new Vue({
el:'#app',
data:{
msg: '父組件向子組件傳遞數(shù)據(jù)'
}
})
</script>
8.3 子給父組件通信
<div id='app'>
<div>{{tip}}</div>
<my-component v-on:aaa=title></my-component>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
Vue.component('my-component', {
template:'<button @click=trans>點(diǎn)我</button>',
data () {
return {
msg: '子組件向父組件傳遞數(shù)據(jù) '
}
},
methods:{
trans:function(){
this.$emit('aaa',this.msg)
}
}
})
var app = new Vue({
el:'#app',
data:{
tip:'父組件：'
},
methods: {
title:function(value){
this.tip = this.tip + value
}
}
})
</script>
8.4 同級組件通信
<div id='app'>
<component1></component1>
<component2></component2>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
Vue.component('component1', {
template:'<button @click=trans>組件1：點(diǎn)我傳遞數(shù)據(jù)</button>',
data () {
return {
msg: '子組件向父組件傳遞數(shù)據(jù) '
}
},
methods:{
trans:function(){
this.$root.bus.$emit('aaa',this.msg)
}
}
})
Vue.component('component2', {
template:'<div>{{title}}</div>',
data () {
return {
title: '組件2：'
}
},
mounted () {
this.$root.bus.$on('aaa',(value)=>{this.title += value})
}
})
var app = new Vue({
el:'#app',
data:{
bus:new Vue()
}
})
8.5 插槽
8.5.1 插槽內(nèi)容
<div id='app'>
<my-component>插槽里的顯示內(nèi)容</my-component>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
Vue.component('my-component', {
template:'<div><p>普通的內(nèi)容</p><slot>如果組件標(biāo)簽間的內(nèi)容為空掀宋，我就顯示<slot></div>',
})
var app = new Vue({
el:'#app',
})
</script>
8.5.2 具名插槽
8.5.3 作用域插槽
8.5.4 訪問slot
