网站模拟课堂模式应该怎么做,南通关键词优化平台,上海最新注册企业,菜鸟教程网站开发Vue的组件相当于HTML中的自定义标签#xff0c;与HTML标签属性对应的概念就是组件的Props。组件的Props是给父组件使用的#xff0c;使用时需要明确指定属性的值#xff0c;或者是在组件定义时#xff0c;给属性提供默认值。组件对象使用Props时#xff0c;要更多的地应用…Vue的组件相当于HTML中的自定义标签与HTML标签属性对应的概念就是组件的Props。组件的Props是给父组件使用的使用时需要明确指定属性的值或者是在组件定义时给属性提供默认值。组件对象使用Props时要更多的地应用计算属性和侦听器去改变组件的状态和DOM结构毕竟组件的Props对组件自己来讲是一个非具体数据。 Vue组件的Props标准定义和推荐使用方式如下
script setup langts
//组件定义中属性定义
const propsdefineProps{msg: string,count:number,show:boolean,list:string[],pfun:Function
}()console.log(props.pfun())
/scripttemplatediv clickpfun()div{{ count }}/divdiv{{ msg }}/divdiv{{ show }}/divdiv{{ list }}/div/div
/template
组件推荐使用方式
script setup langts
import {ref} from vue
import HelloWorld from ./components/HelloWorld.vueconst messageref(You did it!);
const hlistref([hello,wrold,vue]);function hpfun(){console.log(The value is from father component function);return The value is from father component function;
}
/scripttemplateHelloWorld :pfunhpfun :count10 msgYes, You did it! :showtrue :listhlist/HelloWorld
/template
组件中属性定义时需要指明属性的类型。
有属性定义的组件在使用时属性可以通过静态赋值、动态赋值的方式获得初始化。静态赋值是在组件模板或DOM结构中直接给出值仅限于字符串类型。动态赋值是通过js表达式或者使用组件的父组件定义中给出值如上的count、show属性属于js表达式动态赋值list、pfun属性是父组件给出值。这些赋值方式的不同仅仅是因为HTML标签的属性都是字符串的值而js可以给出远超过字符串类型的属性值。从前端组成BOMDOMjs的组成来看js是动态性的支持者DOM是静态性HTML的支持者vue的组件在动态性上的支持是非常强的这也带来了组件属性的多种类型和赋值初始化的问题。
