vue父子组件实现

Vue 父子组件通信实现

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

父组件向子组件传递数据

父组件通过 props 向子组件传递数据，子组件通过定义 props 接收数据。

父组件模板：

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

父组件脚本：

export default {
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}

子组件接收 props：

export default {
  props: ['message'],
  mounted() {
    console.log(this.message) // 输出: Hello from parent
  }
}

子组件向父组件传递数据

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

子组件触发事件：

export default {
  methods: {
    sendMessage() {
      this.$emit('message-from-child', 'Hello from child')
    }
  }
}

父组件监听事件：

<template>
  <child-component @message-from-child="handleChildMessage"></child-component>
</template>

父组件处理方法：

export default {
  methods: {
    handleChildMessage(msg) {
      console.log(msg) // 输出: Hello from child
    }
  }
}

使用 v-model 实现双向绑定

Vue 支持通过 v-model 在父子组件间实现双向数据绑定。

子组件实现：

export default {
  model: {
    prop: 'value',
    event: 'input'
  },
  props: ['value'],
  methods: {
    updateValue(newValue) {
      this.$emit('input', newValue)
    }
  }
}

父组件使用：

<template>
  <child-component v-model="parentValue"></child-component>
</template>

使用 $refs 访问子组件

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

父组件模板：

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

父组件脚本：

export default {
  mounted() {
    this.$refs.childRef.childMethod()
  }
}

使用 provide/inject 跨层级传递数据

祖先组件通过 provide 提供数据，后代组件通过 inject 注入数据。

祖先组件：

export default {
  provide() {
    return {
      ancestorData: 'Data from ancestor'
    }
  }
}

后代组件：

export default {
  inject: ['ancestorData'],
  mounted() {
    console.log(this.ancestorData) // 输出: Data from ancestor
  }
}

注意事项

props 应该尽量使用对象形式定义，可以添加类型检查和默认值：

props: {
  message: {
    type: String,
    required: true,
    default: 'Default message'
  }
}

自定义事件名应该使用 kebab-case 命名方式，避免使用大写字母。

避免直接修改 props 的值，应该通过事件通知父组件修改。