Vue的组件相当于HTML中的自定义标签,与HTML标签属性对应的概念就是组件的Props。组件的Props是给父组件使用的,使用时需要明确指定属性的值,或者是在组件定义时,给属性提供默认值。组件对象使用Props时,要更多的地应用计算属性和侦听器去改变组件的状态和DOM结构,毕竟组件的Props对组件自己来讲是一个非具体数据。
Vue组件的Props标准定义和推荐使用方式如下:
<script setup lang="ts">
//组件定义中属性定义
const props=defineProps<{
msg: string,
count:number,
show:boolean,
list:string[],
pfun:Function
}>()
console.log(props.pfun())
</script>
<template>
<div @click="pfun()">
<div>{
{ count }}</div>
<div>{
{ msg }}</div>
<div>{
{ show }}</div>
<div>{
{ list }}</div>
</div>
</template>
组件推荐使用方式:
<script setup lang="ts">
import {ref} from "vue"
import HelloWorld from './compone