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

在 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. 运行效果

1. 父组件渲染子组件，并监听子组件的 child-event 事件。

2. 当用户点击子组件的按钮时，子组件通过 $emit 触发 child-event 事件，并将数据传递给父组件。

3. 父组件的 handleChildEvent 方法接收到数据，并更新 receivedData，最终在页面上显示。

5. 注意事项

1. 事件命名：

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

   避免使用驼峰命名，因为 HTML 标签属性不区分大小写。

2. 数据传递：

   可以通过 $emit 传递任意类型的数据，包括对象、数组等。

3. 单向数据流：

   Vue 提倡单向数据流，子组件通过事件向父组件传递数据，而不是直接修改父组件的数据。

通过以上方式，子组件可以轻松地向父组件传递数据，实现组件之间的通信。