Vue 父子通信

为什么写？因为好久不知用vue来构建项目，即使用到也相对于简单，简单记录 为了复习

1 父到子

关键点 ： 使用props

父组件：1 引用子组件

2 在子组件绑定自定义名

<demo :get-parent="parentMsg" :do-method="a" @handlerSon="add" style="background-color: lightblue;"></demo>

parentMsg 为父组件的属性， a为父组件方法

3 在子组件中声明要传递的名称及字段

props: ['getParent', 'doMethod'],

4 在子组件获取值 调用方法

<div>
  获取到的父组件的值: {{getParent}}
  执行父组件方法：<button @click="baba">go</button>
</div>

2 子到父

关键点： $emit

1 将想要传递值emit到父组件

this.$emit('handlerSon', this.childMsg)

2 将handlerSon 绑定在子组件上 如上

3 父组件执行add方法 add方案不写参数，参数默认为我们传递的值

⚠️： 支持传递多个值

子：

this.$emit('handlerSon', this.childMsg, 1)

父：

console.log(...arguments)