Vue2和Vue3子组件向父组件传值

在 Vue.js 中，子组件向父组件传递数据通常是通过自定义事件（events）来实现的。这种方法遵循 Vue.js 的单向数据流原则，即数据流动的方向是从父组件流向子组件，而事件传递的方向是从子组件传递回父组件。

Vue 2.x

在 Vue 2.x 中，子组件向父组件传递数据主要通过 $emit 方法触发自定义事件，并在父组件中监听这些事件来接收数据。

示例

1. 子组件（ChildComponent.vue）：

1<template>
2  <button @click="sendDataToParent">点击发送数据</button>
3</template>
4
5<script>
6export default {
7  methods: {
8    sendDataToParent() {
9      // 触发一个名为 'update-data' 的事件，并传递数据
10      this.$emit('update-data', '这是子组件发送的数据');
11    }
12  }
13};
14</script>

1. 父组件（ParentComponent.vue）：

1<template>
2  <div>
3    <child-component @update-data="handleDataFromChild"></child-component>
4    <p>收到的数据：{{ receivedData }}</p>
5  </div>
6</template>
7
8<script>
9import ChildComponent from './ChildComponent.vue';
10
11export default {
12  components: {
13    ChildComponent
14  },
15  data() {
16    return {
17      receivedData: ''
18    };
19  },
20  methods: {
21    handleDataFromChild(data) {
22      this.receivedData = data;
23    }
24  }
25};
26</script>

Vue 3.x

在 Vue 3.x 中，子组件向父组件传递数据的方式与 Vue 2.x 类似，但是 Vue 3.x 引入了一些新的 API 和改进。

示例

1. 子组件（ChildComponent.vue）：vue

深色版本

1<template>
2  <button @click="sendDataToParent">点击发送数据</button>
3</template>
4
5<script setup>
6const emit = defineEmits(['update-data']);
7
8function sendDataToParent() {
9  // 触发一个名为 'update-data' 的事件，并传递数据
10  emit('update-data', '这是子组件发送的数据');
11}
12</script>

1. 父组件（ParentComponent.vue）：

1<template>
2  <div>
3    <child-component @update-data="handleDataFromChild" />
4    <p>收到的数据：{{ receivedData }}</p>
5  </div>
6</template>
7
8<script setup>
9import { ref } from 'vue';
10import ChildComponent from './ChildComponent.vue';
11
12const receivedData = ref('');
13
14function handleDataFromChild(data) {
15  receivedData.value = data;
16}
17</script>

详细解释

1. 子组件触发事件：

   • 在 Vue 2.x 中，使用 this.$emit 触发自定义事件。
   • 在 Vue 3.x 中，使用 defineEmits 获取一个可以触发自定义事件的 emit 对象，并通过该对象触发事件。

2. 父组件监听事件：

   • 在 Vue 2.x 中，使用 @event-name 绑定一个方法来监听子组件触发的事件。
   • 在 Vue 3.x 中，也是使用 @event-name 绑定一个方法来监听子组件触发的事件。

注意事项

1. 事件名称：

   • 事件名称通常使用短横线命名法（kebab-case），如 update-data。
   • 如果使用驼峰命名法（camelCase），Vue 会将其转换为短横线命名法。

2. 传递数据：

   • 在触发事件时，可以传递任意数量的参数。
   • 在父组件中监听事件时，可以通过参数接收这些数据。