类似子类想父类传值,不过这个不管中间有多少个组件,都可是实现,不用再每个组件中设置属性或绑定$attrs;
实现思路是:用一个独立的Vue组件,点击某一组件注册事件,不过事件是注册在独立的做为中转的实力上,在需要接受值的组件中使用 $on调用事件名,设置回调函数,在函数中进行值的设定。
定义一个组件
let dus = new Vue();
传输组件
Vue.component('Eldest_son', {
template: `<div style="width: 200px;height: 200px;border: 1px solid white;display: inline-block;float: left;color: cyan;">{{ name }}<input type="text" v-model="msg"><button @click="sond(msg)">sond</button></div>`,
data() {
return {
name: 'Eldest son',
msg:''
}
}, methods: {
sond(v){
dus.$emit('Pass',v);
console.log(v);
}
}
});
接收组件
Vue.component('Two_sons', {
template: `<div style="width: 200px;height: 200px;border: 1px solid white;float: right;color: yellow;">
{{ name }}<br><input type="text" class="ipt" ref="get">
</div>`,
data() {
return {
name: 'Two sons',
value:''
}
}, methods: {
},
computed:{
getValue(){
return this.value
}
},
mounted(){
dus.$on('Pass',(v)=>{
this.$refs.get.value = v;
// this.$refs.get.value += v;
})
}
});
它们的父组件:
let App = {
data() {
return {
name: "App",
}
},
template: `<div id="app">
{{ name }}<hr>
<Eldest_son></Eldest_son>
<Two_sons></Two_sons>
<p>想把信息从大儿子传向二儿子,不通过它们的父级</p>
</div>`,
methods: {}
};