纯vue实现父子组件

纯 Vue 实现父子组件

在 Vue 中，父子组件的通信和实现是核心功能之一。以下是如何通过纯 Vue 实现父子组件的详细方法。

创建父组件

父组件通常包含子组件，并通过 props 向下传递数据，或通过事件监听子组件的触发。

<template>
  <div>
    <h2>父组件</h2>
    <child-component 
      :message="parentMessage" 
      @child-event="handleChildEvent"
    />
    <p>子组件传递的数据: {{ childData }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: '这是父组件传递的数据',
      childData: ''
    };
  },
  methods: {
    handleChildEvent(data) {
      this.childData = data;
    }
  }
};
</script>

创建子组件

子组件通过 props 接收父组件的数据，并通过 $emit 触发事件向父组件传递数据。

<template>
  <div>
    <h3>子组件</h3>
    <p>父组件传递的数据: {{ message }}</p>
    <button @click="sendDataToParent">向父组件传递数据</button>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  methods: {
    sendDataToParent() {
      this.$emit('child-event', '这是子组件传递的数据');
    }
  }
};
</script>

父子组件通信方式

Props 传递数据
父组件通过 :message="parentMessage" 将数据传递给子组件，子组件通过 props 接收。

事件触发
子组件通过 this.$emit('child-event', data) 触发事件，父组件通过 @child-event="handleChildEvent" 监听并处理。

动态组件与插槽

如果需要更灵活的父子组件交互，可以使用动态组件或插槽。

动态组件
父组件通过 <component :is="currentComponent"></component> 动态加载子组件。

插槽
父组件通过 <slot></slot> 在子组件中插入内容。

<!-- 父组件 -->
<child-component>
  <p>这是插入到子组件的内容</p>
</child-component>

<!-- 子组件 -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

注意事项

• Props 验证：子组件可以通过 props 定义验证规则，确保数据类型和必要性。
• 事件命名：自定义事件名建议使用 kebab-case（如 child-event），避免与 HTML 事件冲突。
• 单向数据流：Props 是单向数据流，子组件不应直接修改父组件传递的数据，而是通过事件通知父组件修改。

通过以上方法，可以高效实现 Vue 父子组件的通信与交互。