在Vue 3中，要实现父子组件传值效果主要通过props和emit两种机制来实现，下面我们就来详细介绍一下这两种机制。

父组件向子组件传值props

props是Vue组件的一种机制，主要的作用就是实现从父组件向子组件传递数据值，在父组件上通过在子组件标签上定义属性来实现数据属性值的传递，在子组件中通过props选项来接收这些数据。如下所示。

首先先来定义一个子组件，并且在子组件中定义好通过props接收的父组件的传值，如下所示。

// 子组件 (ChildComponent.vue)
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

在父组件的模板中，我们可以通过在子组件标签上使用属性绑定来传递数据。

<ChildComponent :message="parentMessage" />

这里我们定义的parentMessage属性就是在父组件中定义的数据属性。然后再子组件中可以通过props接收父组件传递的数据，如下所示。

export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}

通过这种方式，message就成了子组件的一个属性值，就可以在子组件中直接使用这个数据属性值来进行数据的获取操作。

子组件向父组件传值emit

Vue中提供的事件机制允许了子组件可以通过触发触发事件 (emit) 将数据传递到父组件的操作。我们可以在父组件中监听这些事件变化并且处理传递的数据。如下所示。

首先我们先来定义一个需要给父组件传值的子组件，内容如下所示。

// 子组件 (ChildComponent.vue)
<template>
  <div>
    <button @click="sendMessage">Send Message to Parent</button>
  </div>
</template>

<script>
export default {
  emits: ['send-message'],
  methods: {
    sendMessage() {
      this.$emit('send-message', 'Hello from Child');
    }
  }
}
</script>

在子组件中，通过 this.$emit 触发一个事件并传递数据。

this.$emit('send-message', 'Hello from Child');

这里，send-message 是事件的名称，'Hello from Child' 是传递的数据。

接下来，我们就可以在在父组件的模板中，通过 v-on 指令或简写 @ 来监听子组件触发的事件，如下所示。

<ChildComponent @send-message="receiveMessage" />

这里，receiveMessage是父组件中的一个方法，通过这个方法可以接收到通过子组件传递过来的数据值，在后续的操作中来使用这些值。

export default {
  methods: {
    receiveMessage(message) {
      console.log(message); // Output: Hello from Child
    }
  }
}

完整的示例代码

父组件代码内容，如下所示。

<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent :message="parentMessage" @send-message="receiveMessage" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent'
    }
  },
  methods: {
    receiveMessage(message) {
      console.log(message); // Output: Hello from Child
    }
  }
}
</script>

子组件代码内容

<template>
  <div>
    <h2>Child Component</h2>
    <p>{{ message }}</p>
    <button @click="sendMessage">Send Message to Parent</button>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  emits: ['send-message'],
  methods: {
    sendMessage() {
      this.$emit('send-message', 'Hello from Child');
    }
  }
}
</script>

通过这种方式，我们就可以实现Vue3的父子组件之间的传值操作，确保数据在组件树中流动，从而实现复杂的交互逻辑。