vue组件通信----子传父(超级详细)

Vue传值

简单描述

父组件通过绑定自定义事件，接受子组件传递过来的参数
子组件通过$emit触发父组件上的自定义事件，发送参数

子传父具体实现步骤

1.父组件通过$on监听事件，事件处理函数的参数则为接收的数据

2.子组件通过$emit可以触发事件，
3.第一个参数为要触发的事件，第二个事件为要传递的数据
4.sync修饰符：对一个 prop 进行双向绑定

自定义事件

子组件需要以某种方式，例如点击事件的方法来触发一个自定义事件
将所需要传递的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
父组件 引入子组件–>注册子组件–>引用子组件
在子组件标签上绑定对自定事件的监听

总结：在通信中，无论是子传父或父传子都是有中间介质。子传父的介质是自定义事件，父传子的介质是props中的属性。

代码演示

1.父组件parent代码如下:

父组件通过绑定自定义事件，接受子组件传递过来的参数

 <template>
   <div class="parent">
     <h2>{
   {
    msg }}</h