vue父子组件之间传值的方法

一、基本父子传值

父传子

方式：

props

效果：

把父组件的fatherName属性传入子组件，在子组件中使用

父组件代码：

子组件代码：

子传父

方式：

$emit

效果：

在子组件触发事件，修改父组件的fatherName属性

父组件代码：

父组件

子组件代码：

兄弟传值

方式：

eventBus.js

效果：

任意组件之间相互传值

代码：

略

二、ref 父传子

方式：

$refs

效果：

把父组件的fatherName属性传入子组件，在子组件中使用

父组件代码：

子组件代码：

三、v-model 父子传值

方式：

在父组件中使用 v-model

效果：

父子组件之间相互传值

解释：

v-model 的父子传值模式 其实是 绑定的 value 属性和 input 事件的语法糖，可以由 props+$emit 模式演变而来

props+$emit：

父组件代码：

子组件代码：

核心代码改造:

v-model

父组件代码：

子组件代码：

问题：

• 父组件变量只能叫 value
• 子组件自定义事件只能叫 input

  解决：

  通过设置 子组件 身上的model属性，来更改变量名name和自定义事件input的问题

  model:{
      prop: 'newValue',
      event: 'newInput'
  }
  

  父组件代码：

  子组件代码：

  优势：

  v-model模式父子传值比props+$emit模式更加简单

  缺点：

  不能够一次传递多个属性，通过方法四可以处理

  四.sync修饰符 父子传值

  方式：

  在父组件中使用 绑定修饰符 :newValue.sync = ‘newValue’

  效果：

  父子组件之间相互传值

  解释：

  .sync 的父子传值模式 其实是绑定的属性和事件的语法糖

  :val.sync = ‘val’ 等价于 :val"val" @update:val = “val = $event”

  props+$emit 模式核心代码：

  父组件代码改造：

  子组件代码改造：

  修改父组件的fatherName
  
  修改父组件的value
  
  修改父组件的value