第十节:实现vue组件之间的通信
2018-03-21 09:32
597 查看
[align=left]这一节我们还是来继续介绍组件:组件之间如何通信。[/align][align=left]
[/align][align=left]第九节我们在介绍组件知识的时候,提到过组件可以接受参数props,这其实就是组件之间的一种通信方式:父组件→子组件传递数据。[/align][align=left]父组件→子组件[/align][align=left]那我们还是不厌其烦地再演示一遍:父组件→子组件传递数据。
[/align][align=left]
[/align][align=left]组件实例的作用域都是孤立的,也就是子组件在模板template不能引用父组件的数据,那么,当子组件有需要使用父组件的时候,我们该怎么办呢?[/align][align=left]
[/align][align=left]这里,我们使用的是组件的props选项来声明它想要获得的数据。[/align][align=left]
[/align][align=left]我们先来准备一个vue实例:[/align]<div id="app"></div>
<script>
//创建一个vue实例
const app = new Vue({
el:"#app",
data:{
msg:"我是父组件的数据"
}
});
</script>
复制代码[align=left]实例app中含有数据msg值为“我是父组件的数据”,待会我们把它传递给子组件。[/align][align=left]子组件还没有注册,接下来,我们就注册一个组件,组件取名为son:[/align]<div id="app">
<son></son>
</div>
Vue.component('son',{
template:`<div></div>`
});
复制代码[align=left]子组件准备好了,下一步就开始传递数据,父组件向子组件传递参数,我们说过,用组件提供的props选项,接下来,我们就把父组件的msg传给子组件,并展示在页面上。[/align]
[align=left]上面的代码稍加修改:[/align]<div id="app">
<son :message="msg"></son>
</div>
复制代码Vue.component('son',{
props:['message'],
template:`<div>{{message}}</div>`
});
复制代码[align=left]props选项声明了它要接受的参数是message,而接收到的对应的值是父组件的数据msg。我们在子组件顺利地把message展示出来。[/align][align=left]看效果图:[/align]
[align=left]注意:props是单向绑定的(父→子),是vue为了防止子组件无意修改了父组件的数据和状态,如果多个子组件任意地对父组件进行修改,这会让这很整个应用的数据流难以阅读。[/align]
[align=left]如果你想修改父组件传过来的数据,最好是定义一个局部的变量,来依赖传过来的数据。[/align][align=left]
[/align][align=left]这就是父组件→子组件通信的实现,那么,你可能会联想到,如果是子组件向父组件传递数据,要怎么实现呢?[/align][align=left]子组件→父组件[/align][align=left]接下来,我们就学习子组件→父组件通信。
[/align][align=left]
[/align][align=left]相比父→子组件通信,子→父组件就稍微繁琐一点。我们会使用到组件的一个知识点:自定义事件。[/align][align=left]
[/align][align=left]网页事件我们听得多,常用到的有click点击事件,focus聚焦事件等等,事件要怎么自定义呢?[/align][align=left]每一个vue实例都实现了事件接口,我们可以用它提供的API $emit( eventName)来触发一个事件。[/align]
[align=left]是不是听得还是有点云里雾里的?我们来演示一下:[/align][align=left]我们注册一个新组件:[/align]Vue.component('son',{
template:`<button @click="send">
点击
</button>`,
methods:{
send(){
this.$emit('connect');
}
}
});
复制代码[align=left]很简单的一个组件,就是一个按钮button,点击它的时候,会触发组件内部的send( )方法,而方法体里面会触发一个事件,事件名取名为:“connect”。[/align]
[align=left]后我们就去父组件监听这个事件‘connect’,监听方式跟普通原生的事件一模一样,也是用 v-on 指令,缩写用@符号。 我们采用缩写来监听:[/align]<div id="app">
<son @connect="say"></son>
</div>
复制代码[align=left]我们设置了事件connect触发的处理程序是一个say( )方法,我们补上say( )方法的定义:[/align]const app = new Vue({
el:"#app",
methods:{
say(){
console.log(`大家好,我监听到了
事件connect的触发`);
}
}
});
复制代码[align=left]我们在say( )方法触发的时候,在控制台打印一句话,表示我们自定义的事件connect成功触发,并被父组件监听到了。[/align]
[align=left]我们看到了,点击子组件的按钮,成功地调用了父组件的say( )方法,十分顺利。[/align]
[align=left]来到这里,其实我们已经完成了一大半。我们最后只需要把子组件的一些数据,通过这个事件connect传递到父组件,就可以实现子→父组件的通信。[/align]
[align=left]我们修改一下子组件:[/align]Vue.component('son',{
template:`<button @click="send">
点击
</button>`,
data(){
return{
msg:'大家好,我是子组件的数据'
}
},
methods:{
send(){
this.$emit('connect',this.msg);
}
}
});
复制代码[align=left]我们把子组件的data中的msg,通过$emit()一并发射出来,在父组件的say( )方法接收即可。[/align]methods:{
say(msg){
console.log(msg);
}
}
复制代码[align=left]最后还是确认一下是否真的可以读取到子组件出来的msg,看效果图:[/align]
[align=left]这就成功地实现了子→父组件的数据传递。[/align][align=left]非父子组件通信[/align][align=left]除了父子组件的相互通信,非父子关系的组件该如何通信,我们可以巧妙地利用一个空的vue实例来作为一个中央事件总线。[/align][align=left]
[/align][align=left]但是在实际开发中,我们不会这么做,我们会使用专门用于状态管理的 vuex , vuex 的学习我们不在基础系列讲解,我们放在后期的进阶系列再一起学习。[/align][align=left]本节小结[/align][align=left]掌握父→子组件、子→父组件之间的通信,在接下来的实战中将会非常有用。[/align]
[/align][align=left]第九节我们在介绍组件知识的时候,提到过组件可以接受参数props,这其实就是组件之间的一种通信方式:父组件→子组件传递数据。[/align][align=left]父组件→子组件[/align][align=left]那我们还是不厌其烦地再演示一遍:父组件→子组件传递数据。
[/align][align=left]
[/align][align=left]组件实例的作用域都是孤立的,也就是子组件在模板template不能引用父组件的数据,那么,当子组件有需要使用父组件的时候,我们该怎么办呢?[/align][align=left]
[/align][align=left]这里,我们使用的是组件的props选项来声明它想要获得的数据。[/align][align=left]
[/align][align=left]我们先来准备一个vue实例:[/align]<div id="app"></div>
<script>
//创建一个vue实例
const app = new Vue({
el:"#app",
data:{
msg:"我是父组件的数据"
}
});
</script>
复制代码[align=left]实例app中含有数据msg值为“我是父组件的数据”,待会我们把它传递给子组件。[/align][align=left]子组件还没有注册,接下来,我们就注册一个组件,组件取名为son:[/align]<div id="app">
<son></son>
</div>
Vue.component('son',{
template:`<div></div>`
});
复制代码[align=left]子组件准备好了,下一步就开始传递数据,父组件向子组件传递参数,我们说过,用组件提供的props选项,接下来,我们就把父组件的msg传给子组件,并展示在页面上。[/align]
[align=left]上面的代码稍加修改:[/align]<div id="app">
<son :message="msg"></son>
</div>
复制代码Vue.component('son',{
props:['message'],
template:`<div>{{message}}</div>`
});
复制代码[align=left]props选项声明了它要接受的参数是message,而接收到的对应的值是父组件的数据msg。我们在子组件顺利地把message展示出来。[/align][align=left]看效果图:[/align]
[align=left]注意:props是单向绑定的(父→子),是vue为了防止子组件无意修改了父组件的数据和状态,如果多个子组件任意地对父组件进行修改,这会让这很整个应用的数据流难以阅读。[/align]
[align=left]如果你想修改父组件传过来的数据,最好是定义一个局部的变量,来依赖传过来的数据。[/align][align=left]
[/align][align=left]这就是父组件→子组件通信的实现,那么,你可能会联想到,如果是子组件向父组件传递数据,要怎么实现呢?[/align][align=left]子组件→父组件[/align][align=left]接下来,我们就学习子组件→父组件通信。
[/align][align=left]
[/align][align=left]相比父→子组件通信,子→父组件就稍微繁琐一点。我们会使用到组件的一个知识点:自定义事件。[/align][align=left]
[/align][align=left]网页事件我们听得多,常用到的有click点击事件,focus聚焦事件等等,事件要怎么自定义呢?[/align][align=left]每一个vue实例都实现了事件接口,我们可以用它提供的API $emit( eventName)来触发一个事件。[/align]
[align=left]是不是听得还是有点云里雾里的?我们来演示一下:[/align][align=left]我们注册一个新组件:[/align]Vue.component('son',{
template:`<button @click="send">
点击
</button>`,
methods:{
send(){
this.$emit('connect');
}
}
});
复制代码[align=left]很简单的一个组件,就是一个按钮button,点击它的时候,会触发组件内部的send( )方法,而方法体里面会触发一个事件,事件名取名为:“connect”。[/align]
[align=left]后我们就去父组件监听这个事件‘connect’,监听方式跟普通原生的事件一模一样,也是用 v-on 指令,缩写用@符号。 我们采用缩写来监听:[/align]<div id="app">
<son @connect="say"></son>
</div>
复制代码[align=left]我们设置了事件connect触发的处理程序是一个say( )方法,我们补上say( )方法的定义:[/align]const app = new Vue({
el:"#app",
methods:{
say(){
console.log(`大家好,我监听到了
事件connect的触发`);
}
}
});
复制代码[align=left]我们在say( )方法触发的时候,在控制台打印一句话,表示我们自定义的事件connect成功触发,并被父组件监听到了。[/align]
[align=left]我们看到了,点击子组件的按钮,成功地调用了父组件的say( )方法,十分顺利。[/align]
[align=left]来到这里,其实我们已经完成了一大半。我们最后只需要把子组件的一些数据,通过这个事件connect传递到父组件,就可以实现子→父组件的通信。[/align]
[align=left]我们修改一下子组件:[/align]Vue.component('son',{
template:`<button @click="send">
点击
</button>`,
data(){
return{
msg:'大家好,我是子组件的数据'
}
},
methods:{
send(){
this.$emit('connect',this.msg);
}
}
});
复制代码[align=left]我们把子组件的data中的msg,通过$emit()一并发射出来,在父组件的say( )方法接收即可。[/align]methods:{
say(msg){
console.log(msg);
}
}
复制代码[align=left]最后还是确认一下是否真的可以读取到子组件出来的msg,看效果图:[/align]
[align=left]这就成功地实现了子→父组件的数据传递。[/align][align=left]非父子组件通信[/align][align=left]除了父子组件的相互通信,非父子关系的组件该如何通信,我们可以巧妙地利用一个空的vue实例来作为一个中央事件总线。[/align][align=left]
[/align][align=left]但是在实际开发中,我们不会这么做,我们会使用专门用于状态管理的 vuex , vuex 的学习我们不在基础系列讲解,我们放在后期的进阶系列再一起学习。[/align][align=left]本节小结[/align][align=left]掌握父→子组件、子→父组件之间的通信,在接下来的实战中将会非常有用。[/align]
相关文章推荐
- Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信
- Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信
- vue组件之间的多种通信方法
- vue 组件之间的通信(父子、非父子)
- Angular 2父子组件之间共享服务通信的实现
- 使用bus实现Vue组件间通信
- vue $emit 父组件与子组件之间的通信(父组件向子组件传参)
- VUE(一)组件之间的通信
- vue2.0父子组件间通信的实现方法
- Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
- vue子父组件通信的实现代码
- vue组件之间的通信示例
- Vue2.0组件之间通信
- vue父子组件之间的通信
- vue2.0组件之间的通信
- Vuex: 实现同级组件的简单通信
- Vue2.0组件之间通信
- vue组件之间的多种通信方法
- vue组件之间的多种通信方法
- Vue.js组件之同级之间的通信