当前位置：首页 > article >正文

vue2.x 中子组件向父组件传递数据主要通过 $emit 方法触发自定义事件方式实现

article 2025/2/24 16:01:49

在 Vue 2.x 中，子组件向父组件传递数据主要通过 自定义事件 的方式实现。具体步骤如下：

1. 子组件通过 `$emit` 触发事件

子组件可以使用 $emit 方法触发一个自定义事件，并将数据作为参数传递给父组件。

语法：

this.$emit('事件名称', 数据);

事件名称：自定义事件的名称，父组件会监听这个事件。
数据：需要传递给父组件的数据，可以是任意类型（如字符串、数字、对象等）。

<template>
  <div>
    <button @click="sendDataToParent">向父组件传递数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      const data = '这是子组件传递的数据';
      this.$emit('child-event', data); // 触发自定义事件并传递数据
    },
  },
};
</script>

2. 父组件监听子组件的事件

父组件通过在子组件标签上使用 v-on（或简写为 @）监听子组件触发的自定义事件，并在事件处理函数中接收数据。

语法：

<子组件 @事件名称="事件处理函数" />

事件名称：子组件触发的事件名称。
事件处理函数：父组件中定义的方法，用于处理子组件传递的数据。

示例：

<template>
  <div>
    <h2>父组件</h2>
    <p>接收到的数据：{{ receivedData }}</p>
    <ChildComponent @child-event="handleChildEvent" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      receivedData: '', // 用于存储子组件传递的数据
    };
  },
  methods: {
    handleChildEvent(data) {
      this.receivedData = data; // 接收子组件传递的数据
    },
  },
};
</script>

3. 完整示例

子组件 (`ChildComponent.vue`)

<template>
  <div>
    <button @click="sendDataToParent">向父组件传递数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      const data = '这是子组件传递的数据';
      this.$emit('child-event', data); // 触发自定义事件并传递数据
    },
  },
};
</script>

父组件 (`ParentComponent.vue`)

<template>
  <div>
    <h2>父组件</h2>
    <p>接收到的数据：{{ receivedData }}</p>
    <ChildComponent @child-event="handleChildEvent" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      receivedData: '', // 用于存储子组件传递的数据
    };
  },
  methods: {
    handleChildEvent(data) {
      this.receivedData = data; // 接收子组件传递的数据
    },
  },
};
</script>

4. 运行效果

父组件渲染子组件，并监听子组件的 child-event 事件。
当用户点击子组件的按钮时，子组件通过 $emit 触发 child-event 事件，并将数据传递给父组件。
父组件的 handleChildEvent 方法接收到数据，并更新 receivedData，最终在页面上显示。

5. 注意事项

事件命名：

自定义事件的名称建议使用 kebab-case（短横线分隔），例如 child-event。

避免使用驼峰命名，因为 HTML 标签属性不区分大小写。
数据传递：
可以通过 $emit 传递任意类型的数据，包括对象、数组等。
单向数据流：
Vue 提倡单向数据流，子组件通过事件向父组件传递数据，而不是直接修改父组件的数据。