Vue2.x中的父子组件相互通信的实现方法

Vue2.x中的父子组件相互通信的实现方法

业务场景:(这里指的是直接父子级关系的通信)

美女(子组件)将消息发送给大群(父组件)

大群(父组件)收到美女发送的消息后再回个信息给美女(子组件)

父组件

template

群消息girl：

{{ somebody }} 说: 我 {{ age }} 了。

:girls="aGirls"

:noticeGirl="noticeGirl"

@introduce="introduceSelf">

:girls="aGirls"

:noticeGirl="noticeGirl"

@introduce="introduceSelf">

注意的点：

这里在父组件使用v-on来监听子组件上的自定义事件($emit的变化),一旦发生变化noticeGirl方法就会触发

注意的点:

这里methods中定义的方法introduceSelf就是父组件接收到子组件发出的$emit的事件处理程序

子组件

template

{{ index }} - {{ value.name }} - {{ value.age }}

发送消息

script

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。