VUE组件的一些补充(父子,兄弟,同级,跨级组件的通信)
先来看一个父子之间的组件通信;
body>
<div id="app">
<my-component msg="来自父组件的数据"></my-component>
</div>
</body>
<script src="./vue.js"></script>
<script>
Vue.component('my-component',{
props:['msg'],
template: '<div>{{msg}}</div>'
});
new Vue({
el: '#app'
});
</script>
在父组件中,定义了这样一个变量:msg="来自父组件的数据";而我们可以在子组件中,通过选项props来接收来自父组件的数据,注意要跟父组件中传过来的一致,随后,我们就可以在模板中,用插值的方式,把来自父组件的数据显示出来了。
注意:props中声明的数据与data函数return的数据,最大的区别就是,props的数据来自其父级,而data函数return的数据来自自身的这个作用域。
而我们可能会遇到动态的数据,也就是说,数据本身是不确定的,这个时候,我们应该怎么做呢?
<body>
<div id="app">
<input type="text" v-model="parentmsg"> //输入的数据与parentmsg绑定在一起
<my-component :msg="parentmsg"></my-component> //用v-bind: 绑定来自父组件的parentmsg
</div>
</body>
<script src="./vue.js"></script>
<script>
Vue.component('my-component',{
props:['msg'], //通过props属性,声明来自父组件的值
template: '<div>{{msg}}</div>' //用插值的方式显示父组件的值
});
new Vue({
el: '#app',
data:{
parentmsg:'' //初始化父组件中的值,默认为空。
}
});
</script>
也就是说,我们要用v-model和v-bind绑定对应值,以此来达到动态数据,双向绑定的目的。
再看子父之间的通信:
子组件用$emit()来触发事件,父组件用$on(),来监听子组件触发的事件.看一个详细的例子。
<!DOCTYPE html>
<html>
<body>
<div id="app">
<p>总数{{total}}</p>
<my-component @increase="handleGetTotal" @reduce="handleGetTotal"></my-component>
</div>
</body>
<script src="./vue.js"></script>
<script>
Vue.component('my-component',{
template: `
<div>\
<button @click="handleIncrease">+1</button>
<button @click="handleReduce">-1</button>
</div>`,
data:function(){
return {
counter:0
}
},
methods:{
handleIncrease:function(){
this.counter++;
this.$emit('increase',this.counter);
},
handleReduce:function(){
this.counter--;
this.$emit('reduce',this.counter);
}
}
});
new Vue({
el: '#app',
data:{
total:0
},
methods:{
handleGetTotal:function(total){
this.total=total;
}
}
});
</script>
</html>
在这里面,我们分别为父组件和子组件用v-on:绑定了事件,其中,子组件的.$emit()有两个参数,第一个是父组件中的,自定义事件名称,第二个是参数。而在父组件中用,v-on:绑定自定义事件,以此来监听子组件的事件。以此来达到,子组件改变值,触发父组件也改变值。
来给一个v-model创建自定义的表单输入组件,进行双向数据绑定。
<!DOCTYPE html>
<html>
<body>
<div id="app">
<p>总数{{total}}</p>
<my-component v-model="total"></my-component>
<button @click="handleReduce">-1</button>
</div>
</body>
<script src="./vue.js"></script>
<script>
Vue.component('my-component',{
props:['value'],
template: `
<input :value="value" @input="updateValue">`,
methods:{
updateValue:function(event){
this.$emit('input',event.target.value);
}
}
});
new Vue({
el: '#app',
data:{
total:0
},
methods:{
handleReduce:function(){
this.total--;
}
}
});
</script>
</html>
再来看看父子,同级,跨级的组件之间是怎么通信的吧。在vue2.0中,用一个空的VUE实例作为中央事件总线,所有的通信都是通过bus作为中间件来达到目的的。
<!DOCTYPE html>
<html>
<body>
<div id="app">
{{message}}
<component-a></component-a>
</div>
</body>
<script src="./vue.js"></script>
<script>
var bus = new Vue(); //创建一个空的Vue实例,bus作为‘中间件’
Vue.component('component-a',{
template: `
<button @click="handleEvent">传递事件</button>`,
methods:{
handleEvent:function(){
bus.$emit('on-message','来自组件component-a的内容') //触发事件,第一个为事件名,第二个为传递的参数
}
}
});
var app = new Vue({
el: '#app',
data:{
message:''
},
created:function(){
var _this=this; //在调用bus的函数之前,把当前this保存起来,因为在钩子函数中,调用函数之后,this 的指向会被改变,
bus.$on('on-message',function(msg){ //在钩子函数中,监听到了来自bus的事件,第二个参数为回调函数,传递消息的步骤在回调函数中完成。
_this.message=msg;
});
}
})
</script>
</html>
- VUE 简单父子组件,兄弟组件弹窗通信练习
- vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
- vue-父子组件之间的通信以及兄弟组件的通信
- vue组件间通信、数据传递(父子组件,同级组件)
- Vue之父子、同级组件的通信详解
- Vue之父子兄弟组件间通信
- Vue全局组件开发,Vue.use(xxx)一次引入,全局使用 【Vue 非父子组件通信】
- vue父子组件通信常见问题及技巧
- Vue笔记2 父子组件的数据通信
- Vue 非父子组件通信
- Vue.js组件之同级之间的通信
- vue2.0 父子组件之间的通信问题
- Vue父子组件之间的通信实例详解
- vue父子组件通信
- vue2.0父子组件间通信
- Vue组件--非父子组件间的通信
- [js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程
- VUE父子组件通信原理
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- vue.js通过子组件通信和父子组件通信实现动态表单动态绑定事件(适合交互系统统一使用)