vue3 的父子组件传参是怎么进行的 代码演示

Vue3 的父子组件传参可以通过 `props` 属性进行实现。

以下是一个简单的示例代码：

父组件：

<template>
  <div>
    <h1>{{ message }}</h1>
    <ChildComponent :child-message="message"></ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello from parent component!'
    }
  }
}
</script>

子组件：

<template>
  <div>
    <h2>{{ childMessage }}</h2>
  </div>
</template>

<script>
export default {
  props: {
    childMessage: String
  }
}
</script>

在父组件中，我们通过 `:child-message="message"` 将父组件中的 `message` 数据传递给了子组件的 `childMessage` 属性。在子组件中，我们通过 `props: { childMessage: String }` 定义了 `childMessage` 属性的类型为 `String`。

这样，在子组件中就可以使用 `childMessage` 属性来访问从父组件传递过来的数据了。

注意：在 Vue3 中，组件中的 `props` 属性需要以 `defineProps` 来定义，而不是 Vue2 中的 `props`。但是在 `.vue` 单文件组件中，Vue3 会自动将 `props` 转换为 `defineProps`，因此我们可以直接使用 `props` 属性。