Vue组件的自定义属性Props

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 './components/HelloWorld.vue'

const message=ref("You did it!");
const hlist=ref(["hello","wrold","vue"]);

function hpfun(){
  console.log("The value is from father component function");
  return "The value is from father component function";
}
</script>

<template>
    <HelloWorld :pfun="hpfun"  :count="10" msg="Yes, You did it!" :show="true" :list="hlist"></HelloWorld>
</template>

组件中属性定义时，需要指明属性的类型。

有属性定义的组件在使用时，属性可以通过静态赋值、动态赋值的方式获得初始化。静态赋值是在组件模板或DOM结构中直接给出值，仅限于字符串类型。动态赋值是通过js表达式或者使用组件的父组件定义中给出值，如上的count、show属性属于js表达式动态赋值，list、pfun属性是父组件给出值。这些赋值方式的不同仅仅是因为HTML标签的属性都是字符串的值，而js可以给出远超过字符串类型的属性值。从前端组成BOM+DOM+js的组成来看，js是动态性的支持者，DOM是静态性HTML的支持者，vue的组件在动态性上的支持是非常强的，这也带来了组件属性的多种类型和赋值初始化的问题。