htmledit_views">

在 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.html" title=vue>vue';

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

3. 完整示例

子组件 (ChildComponent.html" title=vue>vue)

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

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

父组件 (ParentComponent.html" title=vue>vue)

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

<script>
import ChildComponent from './ChildComponent.html" title=vue>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 提倡单向数据流，子组件通过事件向父组件传递数据，而不是直接修改父组件的数据。

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