vue父子组件实现

父子组件通信方式

Vue中父子组件通信主要通过props和自定义事件实现。父组件向子组件传递数据使用props，子组件向父组件传递数据使用自定义事件。

父组件向子组件传值

父组件通过props向下传递数据给子组件。子组件需要显式声明接收的props。

父组件模板：

<template>
  <child-component :message="parentMessage"></child-component>
</template>

子组件接收：

export default {
  props: ['message'],
  // 或者带类型检查
  props: {
    message: String
  }
}

子组件向父组件传值

子组件通过$emit触发自定义事件，父组件通过v-on监听这些事件。

子组件触发事件：

this.$emit('update', newValue)

父组件监听：

<child-component @update="handleUpdate"></child-component>

双向绑定实现

使用v-model语法糖可以简化双向数据绑定。

子组件实现：

export default {
  model: {
    prop: 'value',
    event: 'input'
  },
  props: ['value']
}

父组件使用：

<child-component v-model="parentData"></child-component>

插槽内容分发

父组件可以通过插槽向子组件传递模板内容。

子组件定义插槽：

<slot name="header"></slot>
<slot></slot>  <!-- 默认插槽 -->

父组件使用：

<child-component>
  <template v-slot:header>
    <h1>标题</h1>
  </template>
  <p>默认内容</p>
</child-component>

依赖注入

对于深层嵌套组件，可以使用provide/inject避免逐层传递props。

祖先组件：

export default {
  provide() {
    return {
      sharedData: this.sharedData
    }
  }
}

后代组件：

export default {
  inject: ['sharedData']
}

访问组件实例

父组件可以通过ref访问子组件实例。

父组件：

<child-component ref="child"></child-component>

this.$refs.child.methodName()

子组件可以通过$parent访问父组件实例，但不推荐这种紧耦合方式。