Vue2.x中的父子组件相互通信的实现方法
业务场景:(这里指的是直接父子级关系的通信)
创新互联专注于槐荫网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供槐荫营销型网站建设,槐荫网站制作、槐荫网页设计、槐荫网站官网定制、小程序制作服务,打造槐荫网络公司原创品牌,更为您提供槐荫网站排名全网营销落地服务。
- 美女(子组件)将消息发送给大群(父组件)
- 大群(父组件)收到美女发送的消息后再回个信息给美女(子组件)
父组件
template
群消息girl:
{{ somebody }} 说: 我 {{ age }} 了。
注意的点:
- 这里在父组件使用v-on来监听子组件上的自定义事件($emit的变化),一旦发生变化noticeGirl方法就会触发
注意的点:
这里methods中定义的方法introduceSelf就是父组件接收到子组件发出的$emit的事件处理程序
子组件
template
- {{ index }} - {{ value.name }} - {{ value.age }}
接收来自大群的消息:{{ noticeGirl }}
script
注意的点:
子组件使用$emit发出自定义事件
相比于Vue1.x的变化:
$dispatch 和 $broadcast 已经被弃用
*官方推荐的通信方式
首选使用Vuex
使用事件总线:eventBus,允许组件自由交流
具体可见:https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替换
结果
以上所述是小编给大家介绍的Vue2.x中的父子组件相互通信,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!
网站栏目:Vue2.x中的父子组件相互通信的实现方法
当前网址:http://hbruida.cn/article/ghccij.html