Vue父子组件相互传值

1. 父组件向子组件传值

    子组件在props中创建一个属性，用以接收父组件传过来的值

    父组件中注册子组件

    在子组件标签中添加子组件props中创建的属性

    把需要传给子组件的值赋给该属性

2. 子组件向父组件传值

子组件中需要以某种方式例如input事件的方法来触发一个自定义事件

将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法

在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

 

3. 父子组件相互传值

例子效果：父组件和子组件中各有一个input标签和一个p标签，通过父组件或子组件中的input进行编辑，同步更改4个标签的显示内容。

4. vue的$emit（event,[...args]）

触发当前实例上的事件。附加参数都会传给监听器回调。

子组件通过$emit触发父组件上绑定的自定义事件，将自身数据作为参数传入事件函数，在父组件的事件函数中将参数赋值给父组件的对应变量。

示例，App.vue中v-on为组件绑定事件(自定义事件)，子组件通过$emit触发事件

总结：无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。