VUE 之 父子组件通信简述

最好是先看下面的小步骤，再看大图的解释 ：）

知识背景

01. 父组件向子组件传递数据 —— props

         需求： 父组件中有一个数组数据和一个字符串对象数据，现在要传递给子组件

1. 父组件Vue： data中放数据，components中注册子组件cpnC1（局部注册）
2. 子组件cpnC1： template中放HTML模板（这里是模板抽离了），props中用数组来保存从父组件来的数据
3. 模板template： 写要展示的值 （注意是写子组件中的props中的值，不是Vue中的）
4. 主div： 用 v-bind 将父子组件中的 data 和 props 的值绑定

02. 子组件向父组件发送消息 —— props

        步骤： ①子组件中，$erim（）来触发事件     ②父组件中，v-on来监听事件
        需求： 子组件已有两个对象数据，在父组件中根据当前点击的对象，在控制台输出该对象

1. 子组件cpnC1： template中放HTML模板，data函数 中放已有数据，methods中添加方法，利用 $emit 将data函数中的数据反射给父组件，参数是：‘自定义事件名’，‘传递什么给父组件’ ，这里是把当前点击的item对象传过去
2. 模板template： 对子组件中的对象进行遍历展示，添加点击事件 @click （在子组件中已声明的方法）
3. 主div： 在子组件的标签中，通过v-on 绑定自定义的事件，@子组件中自定义的方法名=“父组件中用来接收事件的函数名”
4. 父组件Vue： 在methods中添加方法（就是主div中声明的父组件的函数名）