当前位置：首页 > VUE

纯vue实现父子组件

2026-02-22 17:55:13VUE

纯 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> 在子组件中插入内容。

纯vue实现父子组件

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

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

注意事项

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

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

标签: 父子组件

分享给朋友：

vue 实现组件刷新

组件局部刷新在Vue中实现组件刷新可以通过强制重新渲染组件来实现。常用的方法有以下几种：使用v-if指令通过切换v-if条件触发组件的销毁和重建 <template> <…

vue实现递归组件

递归组件的实现方法在Vue中实现递归组件主要依靠组件调用自身的能力。以下是几种常见的实现方式：使用组件name属性通过组件的name属性实现递归调用是最简单的方式： <template…

vue实现分页组件

Vue 分页组件实现基础分页组件结构创建一个名为 Pagination.vue 的文件，包含以下基础模板和逻辑： <template> <div class="pagina…

vue实现弹窗组件

实现弹窗组件的基本结构在Vue中创建一个弹窗组件通常需要三个核心部分：组件模板、样式和逻辑控制。弹窗组件应具备打开、关闭功能，并支持内容插槽或属性传入。 <template> &l…

vue实现路由组件

Vue 实现路由组件的方法在 Vue 中实现路由功能通常需要结合 Vue Router 库，以下是具体实现步骤：安装 Vue Router 通过 npm 或 yarn 安装 Vue Router…

vue 实现树组件

Vue 树形组件实现基础树形结构实现使用递归组件实现树形结构，核心是通过组件自身调用自身渲染嵌套数据。 <template> <ul> <li v-fo…

纯vue实现父子组件