vue3父组件向子组件传值 并使用

在Vue 3中，父组件向子组件传递值可以通过props属性实现。下面是一个示例：

父组件（app.vue）：

<template>
  <!-- 传入了color和height属性 -->
  <demo color="red" :height="30"/>
</template>

<script setup>
import { ref, reactive } from "vue";
// 导入组件,因为是setup语法糖，所以无需手动注册组件
// demo为当前页的组件名称你可以随便取名， "./components/propsSetup.vue" 是组件的路径
import demo from "./components/propsSetup.vue";
</script>

子组件（propsSetup.vue）：

<template>
  <div :style="{ color: textColor, height: `${height}px` }">
    {{ message }}
  </div>
</template>

<script setup>
import { ref, reactive, defineProps } from "vue";

// 定义props属性
const props = defineProps({
  color: String,
  height: Number
});

// 使用props属性
const textColor = ref(props.color);
const height = ref(props.height);
const message = ref("Hello, World!");
</script>

在上面的示例中，父组件（app.vue）通过props属性向子组件（propsSetup.vue）传递了color和height属性。子组件通过defineProps函数定义了这些属性，并在模板中使用了它们。