Vue3 defineProps传递值在dom中使用

在Vue 3中，`defineProps`是用于声明组件的props（属性），使得父组件可以向子组件传入数据。当你在`<script setup>`部分使用`defineProps`，你可以这样定义接收的props：

import { defineProps } from 'vue';

export default {
  props: {
    // 定义prop名称、描述和默认值（可选）
    message: {
      type: String,
      required: true, // 如果未提供，则会触发错误
      default: 'Hello Vue!',
    },
    backgroundColor: {
      type: String,
      default: 'white',
    },
  },
};

然后，在模板中使用这些props，它们会被自动绑定到组件实例上，可以直接在DOM元素的属性中显示：

<template>
  <div :style="{ backgroundColor: backgroundColor }">
    <p>{{ message }}</p>
  </div>
</template>

在这个例子中，`message`将会动态展示来自父组件的数据，而`:style`指令则允许我们在运行时改变`backgroundColor`属性。