vue3 通过 props 来定义属性，我们可以通过属性将值传给自定义组件，比如颜色、高度宽度等等，定义属性时我们也可以定义类型和默认值,本文重点描述了如何定义属性和修改属性的值。
子组件 propsSetup.vue
<!-- 子组件 propsSetup.vue -->
<template>
<div class="itxst">
<div :style="{ color:props.color }">{{msg}}</div>
<!--绑定属性-->
<input :style="{ color:props.color ,height:props.height+'px'}" @input="onInput" />
</div>
</template>
<script setup>
import { ref, reactive } from "vue";
/*
* 定义组件的属性
* type 表示属性类型
* default 表示默认值
*/
const props = defineProps({
msg: {
type: String,
default: "www.itxst.com",
},
color: {
type: String,
default: "#000",
},
height:{
type:Number,
default:120,
}
});
/*
也可以通过数组方式定义属性,缺点是不能定义类型和默认值
const props = defineProps(['msg','color']);
*/
</script>
<style scoped>
</style>
使用该自定义组件
父组件 app.vue
<!-- 父组件 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>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/188428.html
