第十节:实现vue组件之间的通信
这一节我们还是来继续介绍组件:组件之间如何通信。
第九节我们在介绍组件知识的时候,提到过组件可以接受参数props,这其实就是组件之间的一种通信方式:父组件→子组件传递数据。
父组件→子组件
那我们还是不厌其烦地再演示一遍:父组件→子组件传递数据。
组件实例的作用域都是孤立的,也就是子组件在模板template不能引用父组件的数据,那么,当子组件有需要使用父组件的时候,我们该怎么办呢?
这里,我们使用的是组件的props选项来声明它想要获得的数据。
我们先来准备一个vue实例:
<div id="app"></div> <script> //创建一个vue实例 const app = new Vue({ el:"#app", data:{ msg:"我是父组件的数据" } }); </script>
实例app中含有数据msg值为“我是父组件的数据”,待会我们把它传递给子组件。
子组件还没有注册,接下来,我们就注册一个组件,组件取名为son:
<div id="app"> <son></son> </div>
Vue.component('son',{ template:`<div></div>` });
子组件准备好了,下一步就开始传递数据,父组件向子组件传递参数,我们说过,用组件提供的props选项,接下来,我们就把父组件的msg传给子组件,并展示在页面上。
上面的代码稍加修改:
<div id="app"> <son :message="msg"></son> </div>
Vue.component('son',{ props:['message'], template:`<div>{{message}}</div>` });
props选项声明了它要接受的参数是message,而接收到的对应的值是父组件的数据msg。我们在子组件顺利地把message展示出来。
看效果图:
(没毛病)
注意:props是单向绑定的(父→子),是vue为了防止子组件无意修改了父组件的数据和状态,如果多个子组件任意地对父组件进行修改,这会让这很整个应用的数据流难以阅读。
如果你想修改父组件传过来的数据,最好是定义一个局部的变量,来依赖传过来的数据。
这就是父组件→子组件通信的实现,那么,你可能会联想到,如果是子组件向父组件传递数据,要怎么实现呢?
子组件→父组件
接下来,我们就学习子组件→父组件通信。
相比父→子组件通信,子→父组件就稍微繁琐一点。我们会使用到组件的一个知识点:自定义事件。
网页事件我们听得多,常用到的有click点击事件,focus聚焦事件等等,事件要怎么自定义呢?
每一个vue实例都实现了事件接口,我们可以用它提供的API $emit( eventName)来触发一个事件。
是不是听得还是有点云里雾里的?我们来演示一下:
我们注册一个新组件:
Vue.component('son',{ template:`<button @click="send"> 点击 </button>`, methods:{ send(){ this.$emit('connect'); } } });
很简单的一个组件,就是一个按钮button,点击它的时候,会触发组件内部的send( )方法,而方法体里面会触发一个事件,事件名取名为:“connect”。
然后我们就去父组件监听这个事件‘connect’,监听方式跟普通原生的事件一模一样,也是用 v-on 指令,缩写用@符号。 我们采用缩写来监听:
<div id="app"> <son @connect="say"></son> </div>
我们设置了事件connect触发的处理程序是一个say( )方法,我们补上say( )方法的定义:
const app = new Vue({ el:"#app", methods:{ say(){ console.log(`大家好,我监听到了 事件connect的触发`); } } });
我们在say( )方法触发的时候,在控制台打印一句话,表示我们自定义的事件connect成功触发,并被父组件监听到了。
( gif演示图,加载需要点时间 )
我们看到了,点击子组件的按钮,成功地调用了父组件的say( )方法,十分顺利。
来到这里,其实我们已经完成了一大半。我们最后只需要把子组件的一些数据,通过这个事件connect传递到父组件,就可以实现子→父组件的通信。
我们修改一下子组件:
Vue.component('son',{ template:`<button @click="send"> 点击 </button>`, data(){ return{ msg:'大家好,我是子组件的数据' } }, methods:{ send(){ this.$emit('connect',this.msg); } } });
我们把子组件的data中的msg,通过$emit()一并发射出来,在父组件的say( )方法接收即可。
methods:{ say(msg){ console.log(msg); } }
最后还是确认一下是否真的可以读取到子组件出来的msg,看效果图:
( gif演示图,加载需要点时间 )
这就成功地实现了子→父组件的数据传递。
非父子组件通信
除了父子组件的相互通信,非父子关系的组件该如何通信,我们可以巧妙地利用一个空的vue实例来作为一个中央事件总线。
但是在实际开发中,我们不会这么做,我们会使用专门用于状态管理的 vuex , vuex 的学习我们不在基础系列讲解,我们放在后期的进阶系列再一起学习。
本节小结
掌握父→子组件、子→父组件之间的通信,在接下来的实战中将会非常有用。
扩展阅读
1.《ECMAScript 6 系列》原创教程
第十节:实现vue组件之间的通信相关推荐
- [vue] vue组件之间的通信都有哪些?
[vue] vue组件之间的通信都有哪些? 父子Coms: 1/2/3 ..兄弟Coms: 4/5跨级Coms: 4/5/6/7props$emit/$on( $parents/$children ) ...
- 描述vue组件之间的通信
##描述 vue组件之间的通信 详细易懂,转自https://www.cnblogs.com/barryzhang/p/10566515.html
- Vue组件之间的通信-父传子-子传父
文章目录 Vue的组件嵌套 Vue组件间通信 1.父组件传递给子组件 1.1数组的方式 1.2对象的方式 2.子组件传递给父组件 Vue的组件嵌套 前面我们是将所有的逻辑放到一个App.vue中: 在 ...
- vue 组件之间的通信
目录 前言 一.props 和 $emit 二.$attrs 和 $listeners 三.eventBus--$emit 和 $on 四.provide 和 inject(跨组件通信) 1.认识 p ...
- 【组件】Vue组件之间的通信父传子 | 子传父
- vue中子组件和子组件之间怎么通信_vue.js组件之间如何通信?
vue.js组件之间如何通信?下面本篇文章就来给大家介绍一下Vue.js组件间通信方式.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 平时在使用Vue框架的业务开发中,组件不仅仅要 ...
- vue/父子组件之间的通信
父子组件之间的通信 父组件绑定数据在组件上子组件props属性接收 父组件内的data属性中待传的数据data1 => <cpn :data2="data1">& ...
- uniapp 子组件 props拿不到数据_谈一谈使用 webpack 开发时,Vue 组件之间的数据传递...
•我们在学习Vue的时候,难免会使用各个组件之间传递数据.•先来介绍一下Vue中组件传递的方式,有父组件传递给子组件数据,子组件传递给父组件数据,父组件直接获取子组件中数据,子组件直接获取父组件数据以 ...
- vue组件之间互相传值:父传子,子传父
vue组件之间互相传值:父传子,子传父 为什么要用到组件间传值? 答:组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据,也不能直接将子组件的数据传到父组件里面 ...
最新文章
- 使用CEfSharp之旅(7)CEFSharp 拦截 http 请求 websocket 内容
- Swift - 经纬度位置坐标与真实地理位置相互转化
- (一)SpringBoot 整合 MyBatis
- zabbix4.2 系列(二):agent配置
- Elasticsearch-mapper 基于注解方式生成mapping(2.0以上)
- Redis的管道pipeline
- vue-router各个属性的作用及用法
- 有没有能够很快上手的报表框架
- ztree带有选项框的树形菜单使用
- TP-LINK_841N_V8路由器硬改升级OpenWRT记
- Ubuntu Temporary failure in name resolution 问题
- java 获取农历日期
- 基于Select模型的匿名聊天室v1.0
- Movavi Screen Recorder 10 Mac(全能录屏软件) 中文激活版
- 使用kail中Metasploit获取Windows的权限并提权
- ABAP SE54 视图簇
- 讲情怀的韦晓亮和他的科技教育因果论
- 基于docker 搭建Prometheus+Grafana监控
- Getting started with wxPython
- Redis学习笔记~Redis事务机制与Lind.DDD.Repositories.Redis事务机制的实现