vue3中使用props传递数据实例

在Vue3中，使用props传递数据的方式与Vue2相比有一些变化。在Vue3中，我们可以使用`setup`函数来定义组件，并通过`props`选项来传递数据。

下面是一个Vue3中使用props传递数据的实例：

// 子组件
const ChildComponent = {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  template: `
    <div>
      <p>{{ message }}</p>
    </div>
  `
}

// 父组件
const ParentComponent = {
  components: {
    ChildComponent
  },
  template: `
    <div>
      <child-component :message="propMessage" />
    </div>
  `,
  data() {
    return {
      propMessage: 'Hello, Vue3!'
    }
  }
}

// 创建Vue应用程序
const app = Vue.createApp({
  components: {
    ParentComponent
  },
  template: `
    <div>
      <parent-component />
    </div>
  `
})

// 挂载应用程序
app.mount('#app')

在上面的示例中，父组件通过`:message="propMessage"`将数据`propMessage`传递给子组件，并在子组件中使用`props`选项来接收和使用传递的数据。