vue3组件传值

// 父组件 (ParentComponent.vue)
<template>
  <div>
    <h1>父组件</h1>
    <p>从子组件接收到的值: {{ receivedValue }}</p>
    <ChildComponent @child-event="handleChildEvent" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedValue: ''
    };
  },
  methods: {
    handleChildEvent(value) {
      this.receivedValue = value;
    }
  }
};
</script>

// 子组件 (ChildComponent.vue)
<template>
  <div>
    <h2>子组件</h2>
    <button @click="sendDataToParent">发送数据给父组件</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      const valueToSend = '这是来自子组件的数据';
      this.$emit('child-event', valueToSend);
    }
  }
};
</script>

解释说明

1. 父组件 (ParentComponent.vue):

   • 使用 <ChildComponent> 标签引入子组件。
   • 定义了一个 receivedValue 数据属性，用于存储从子组件接收到的值。
   • 监听子组件发出的 child-event 事件，并在触发时调用 handleChildEvent 方法更新 receivedValue。

2. 子组件 (ChildComponent.vue):

   • 定义了一个按钮，点击时调用 sendDataToParent 方法。
   • sendDataToParent 方法通过 $emit 触发 child-event 事件，并传递一个字符串作为参数给父组件。

通过这种方式，子组件可以向父组件传递数据，实现父子组件之间的通信。