Vue核心技术-18,父子组件通信

一,前言

前面介绍了子组件使用props接收来自父组件传递的参数及验证
这种传递是父组件->子组件传递数据
而父子组件通信还要实现子组件->父组件传递数据

组件间的通信按照关系可分为:父子组件通信,兄弟组件通信,跨级组件通信三种

二,子组件向父组件通信

对于父子组件通信中的父组件通过子组件props选项向子组件传参已经介绍过了
那么子组件如何向父组件传递数据呢?
当子组件向父组件传递数据时,要用到自定义事件

什么是自定义事件:

Vue组件中有一套机制,类似于观察者模式(也被称作订阅发布模式),称为自定义事件

自定义事件的使用:

子组件使用$emit()触发事件,父组件使用$on监听子组件事件
父组件也可以直接在子组件的自定义标签上使用v-on监听子组件触发的自定义事件

如图所示:

---

三,父子组件通信的方法

有了以上了解,通过下边的Demo演示并说明父子组件通信

<div id="app">
    <div>父组件数据: {{ parentMsg }}</div>
    <button @click="sendMsgToChild">向子组件发送数据</button>
    <my-component :msg='childMsg' @send="sendMsgToParent"></my-component>
</div>

<script type="text/javascript">
    Vue.component('my-component',{
        props:['msg'],
        template:
            '<div>' +
                '<div>子组件数据: {{ msg }}</div>' +
                '<button @click="handle">向父组件发送数据</button>' +
            '</div>',
        methods: {
            handle: function () {
                this.$emit('send', '来自子组件的数据')
            }
        }
    });

    const vm = new Vue({
        el: '#app',
        data:{
            parentMsg:'',
            childMsg:''
        },
        methods:{
            sendMsgToChild: function () {
                this.childMsg = '来自父组件的数据'
            },
            sendMsgToParent:function (value) {
                this.parentMsg = value;
            }
        }
    })
</script>

初始化显示:

由于parentMsg和childMsg初始值为空,所以子组件初始化msg也为空

点击父组件中’向子组件发送数据’按钮:

childMsg值为'来自父组件的数据',通过子组件props选项传入子组件并显示

点击子组件中’向父组件发送数据’按钮:

触发组件内部handle方法,通过$emit触发子组件传入的Vue实例方法sendMsgToParent
sendMsgToParent中改变了parentMsg值为'来自父组件的数据',触发页面更新

---

四,结尾

父组件向子组件传参可以使用props选项,这篇主要介绍子组件如何向父组件进行通信
父子组件的通信很简单,下面介绍兄弟组件通信和跨级组件通信的实现

维护记录:
20180820:
添加父子组件通信流程图