vue3 组件传值

<template>
  <div>
    <ChildComponent :message="parentMessage" @childEvent="handleChildEvent" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent'
    };
  },
  methods: {
    handleChildEvent(value) {
      console.log('Received from child:', value);
    }
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendToParent">Send to Parent</button>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  },
  methods: {
    sendToParent() {
      this.$emit('childEvent', 'Hello from Child');
    }
  }
};
</script>

解释说明：

1. 父组件传值给子组件：

   • 在父组件中，通过 v-bind（简写为 :）将数据传递给子组件的 props。
   • 示例代码中，父组件通过 :message="parentMessage" 将 parentMessage 的值传递给子组件。

2. 子组件接收父组件传递的值：

   • 子组件通过 props 接收父组件传递的数据。在子组件中定义 props，如 message: String，用于接收父组件传递的值。

3. 子组件触发事件并传递数据给父组件：

   • 子组件通过 $emit 触发自定义事件，并可以传递数据给父组件。
   • 示例代码中，子组件通过 this.$emit('childEvent', 'Hello from Child') 触发 childEvent 事件，并传递字符串 'Hello from Child' 给父组件。

4. 父组件监听子组件事件：

   • 父组件通过 v-on（简写为 @）监听子组件触发的自定义事件，并可以在方法中处理接收到的数据。
   • 示例代码中，父组件通过 @childEvent="handleChildEvent" 监听子组件的 childEvent 事件，并调用 handleChildEvent 方法处理接收到的数据。