先放完整代码:
{{ message }}
// -----------------------------非父子组件之间传值--------------------------------------
// 需要定义个公共的实例对象Bus作为中间仓库来传值,不然组件之间达不到传值的效果。
const Bus = new Vue();
// data:{}和data(){return{}}区别在于后面这个this的使用
// 定义名为 todo-item 的子组件1
Vue.component('todo-item', {
//-------------------------------父组件值传递给子组件------------------------------------------
//
// 先在 todo-item 标签上定义好要传递的值 parentMsg 和 todo,并赋予pmsg和todo123(名称随意)
// 子组件通过 props 接收父组件传递的值,子组件就可使用,但不可以更改.(vue单项传递数据原则)
props: ['pmsg','todo123'],
data(){
return{
msg:this.pmsg,
childMsg:'子组件1好多好多信息'
}
},
template: '
{{ todo123.text }}
子组件2可改变的父组件值:{{ pmsg }}methods:{
communicate1(){
Bus.$emit('Busemit',this.childMsg)
}
}
})
// 定义名为 todo-item2 的子组件2
Vue.component('todo-item2',{
props:['todo'],
data(){
return{
childMsg:'子组件2信息'
}
},
template:'
{{childMsg}}
created() {
Bus.$on("Busemit", (msg)=>{
this.childMsg = msg;
});
},
methods:{
//-------------------------------子组件值传递给父组件------------------------------------------
communicate2(){
//
// 点击触发communicate2函数
// 然后$emit todo-item2 标签上的communicate属性,此时触发父组件childHandle函数,并传递子组件2数据childMsg
this.$emit('communicate',this.childMsg);
}
}
})
var app5 = new Vue({
el: '#app-5',
data() {
return{
parentMsg:'我是父组件值',
message: 'Hello Vue.js!',
todo: {
text: "哈哈哈哈"
}
}
},
methods: {
reverseMessage () {
this.message = this.message.split('').reverse().join('')
},
childHandle(childMsg){
this.parentMsg = childMsg;
}
}
})