父传子:主要是通过 子组件使用 props() 方法来接收 父组件传递过来的值
Vue.component('father',{
template:`
<div>
<p>我是father,我给我son取得名字叫{{sonName}}</p>
<son :myName="sonName"></son>
</div>
`,
data(){
return {
sonName:'Juliet'
}
},
components:{
son:{
// 子组件通过 props 来接收组组件传过来的值
props:['myName'],
template:`
<div>
<p>我是son,我father给我取名字叫{{myName}}</p>
</div>
`,
}
}
})
子传父: 使用 $emit('一个事件的名称' ,'需要传递的数据') 方法 传递需要传递的数据
Vue.component('father',{
template:`
<div>
<p >我是father,son告诉我他叫{{sonName}}</p>
<son @tellfatherMyName="mysonName"></son>
</div>
`,
methods:{
// 这个函数有一个参数 就是传递过来的数据
mysonName(data){
// console.log(data)
this.sonName = data
}
},
data(){
return {
sonName:'???'
}
},
components:{
son:{
template:`
<div>
<button @click="tellfatherMyName">我是son ,我告诉father 我新取得名字叫{{myName}}</button>
</div>
`,
data(){
return {
myName:'Juliet'
}
},
methods:{
tellfatherMyName(){
// 子组件传值给父组件用 $emit() 方法
// 这个方法可以穿两个值
// 一个事件名称 一个就是需要传递的数据
this.$emit('tellfatherMyName',this.myName)
}
}
}
}
})
非父子传值:传值的一方通过使用 $emit() 把数据传到事件总线 接收数据的一方再通过 $on() 方法来接收传递过来的数据
// 创建一个新的Vue实例 作为事件总线
var eventbus = new Vue()
Vue.component('father',{
template:`
<div>
<son></son>
<daughter></daughter>
</div>
`,
components:{
son:{
template:`
<div>
<p>我是son daughter告诉我她名字叫{{daughterName}}</p>
</div>
`,
data(){
return {
daughterName:'???'
}
},
mounted() {
// 通过 $on() 方法来监听兄弟节点传递的数据
// 这个方法有两个参数 一个是时间的名称 一个是函数 这个函数的默认值就是传递过来的数据
eventbus.$on('TellsonMyName',data => {
// console.log(data)
this.daughterName = data
})
},
},
daughter:{
template:`
<div>
<button @click="TellsonMyName">点击告诉son 我的名字叫{{myName}}</button>
</div>
`,
data(){
return {
myName:'Juliet'
}
},
methods:{
TellsonMyName(){
eventbus.$emit('TellsonMyName',this.myName)
}
}
}
}
})