vue3组件传值的方式

<template>
  <div>
    <!-- 父组件 -->
    <ParentComponent />
  </div>
</template>

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

export default {
  components: {
    ParentComponent
  }
};
</script>

ParentComponent.vue

<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent :message="parentMessage" @childEvent="handleChildEvent" />
    <p>从子组件接收的值：{{ childValue }}</p>
  </div>
</template>

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

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

ChildComponent.vue

<template>
  <div>
    <h2>子组件</h2>
    <p>从父组件接收到的值：{{ message }}</p>
    <button @click="sendToParent">发送给父组件</button>
  </div>
</template>

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

解释说明

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

   • 在 ParentComponent.vue 中，通过 v-bind (:) 将父组件的数据 parentMessage 传递给子组件 ChildComponent。
   • 子组件通过 props 接收父组件传递的值。

2. 子组件向父组件传值：

   • 在 ChildComponent.vue 中，使用 $emit 触发一个自定义事件 childEvent，并将数据传递给父组件。
   • 父组件通过 v-on (@) 监听子组件触发的事件，并在方法 handleChildEvent 中处理接收到的数据。

3. 双向绑定（可选）：

   • 如果需要实现双向绑定，可以结合 v-model 或者 .sync 修饰符来简化代码。