常用的组件通信

• props自定义属性不传时有默认值为默认值

1.prpos

• 子组件接收到数据之后，不能直接修改父组件的数据。会报错，所以当父组件重新渲染时，数据会被覆盖。如果子组件内要修改的话推荐使用 computed
• Parent -eg

• Child
• eg

2.父：.sync 子：update

• 可以帮我们实现父组件向子组件传递的数据 的双向绑定，所以子组件接收到数据后可以直接修改，并且会同时修改父组件的数据
• Parent
• eg

• Child
• eg

3.$ref

• ref 如果在普通的DOM元素上，引用指向的就是该DOM元素;
• 如果在子组件上，引用的指向就是子组件实例，然后父组件就可以通过 ref 主动获取子组件的属性或者调用子组件的方法
• Parent
• eg

• Child
• eg

4.$emit/v-on

• Parent
• eg

• Child
• eg

5.$attrs 6.$listeners

• Parent
• eg

• Child
• eg

7.组件prop实现双向绑定

• Parent
• eg

• Child
• eg

8.自定义组件使用v-model

• Parent
• eg

<child v-model="baseModelValue"></child>
// ...
data() {
  return {
    baseModelValue: ''
  }
}
// ...

• Child
• eg

  <el-input :value="value" @input="handleInput"></el-input>

  // ...
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleInput(e) {
      this.$emit('input', e.target.value)
    }
  }
  // ...