Vue中子组件向父组件传值

✅ 方法 1：$emit 事件传值（推荐）

适用场景：子组件需要向父组件传递数据，父组件可以监听该事件并处理数据。

实现步骤

1. 子组件调用 $emit 触发事件，并传递数据

2. 父组件监听该事件，并接收数据

示例

1. 子组件（Child.vue）

<template>
  <div>
    <button @click="sendData">点击传值</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('update-value', '子组件传递的数据');
    },
  },
};
</script>

2. 父组件（Parent.vue）

<template>
  <div>
    <p>父组件收到的值: {{ parentData }}</p>
    <Child @update-value="handleUpdate" />
  </div>
</template>

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

export default {
  components: { Child },
  data() {
    return {
      parentData: '',
    };
  },
  methods: {
    handleUpdate(newValue) {
      this.parentData = newValue;
    },
  },
};
</script>

解释

• 子组件 通过 this.$emit('update-value', 数据) 触发 update-value 事件

• 父组件 在 Child 组件上监听 @update-value 并执行 handleUpdate

• 父组件的 handleUpdate 方法 处理数据并更新 parentData

✅ 方法 2：$refs 直接访问子组件数据

适用场景：父组件主动获取子组件数据（而不是子组件主动发送）。

实现步骤

1. 子组件定义数据

2. 父组件使用 $refs 获取子组件实例，读取数据

示例

1. 子组件（Child.vue）

<template>
  <div>
    <p>子组件数据: {{ childData }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childData: '子组件中的数据',
    };
  },
};
</script>

2. 父组件（Parent.vue）

<template>
  <div>
    <button @click="getChildData">获取子组件数据</button>
    <p>父组件获取的值: {{ parentData }}</p>
    <Child ref="childRef" />
  </div>
</template>

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

export default {
  components: { Child },
  data() {
    return {
      parentData: '',
    };
  },
  methods: {
    getChildData() {
      this.parentData = this.$refs.childRef.childData;
    },
  },
};
</script>

解释

• 通过 ref="childRef" 获取 子组件实例

• 使用 this.$refs.childRef.childData 读取子组件数据

• 适用于父组件主动获取数据的情况

⚠ 注意：$refs 只能在 DOM 渲染完成后（mounted） 访问。