Vue3 父子组件简单案例：数据传递与使用

以下是一个简单的 Vue3 父子组件案例：

父组件 App.vue：

<template>
  <div>
    <h1>我是父组件</h1>
    <child :message='parentMsg'></child>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    Child
  },
  data() {
    return {
      parentMsg: '这是来自父组件的信息'
    }
  }
}
</script>

子组件 Child.vue：

<template>
  <div>
    <h2>我是子组件</h2>
    <p>{{ message }}</p>
  </div>
</template>

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

在父组件中，我们使用了子组件 Child，并向其传递了一个名为 message 的属性，值为 parentMsg，这个属性是通过 props 传递给子组件的。在子组件中，我们通过插值表达式输出了这个属性的值。

这个简单的例子展示了如何在 Vue3 中创建父子组件，并向子组件传递属性。