时间:2021-05-18
Prop
基本用法
Prop的基本用法很简单,只需要在子组件的Vue实例中定义该属性并把值设为目标属性的数组即可
Vue.component('child', { ... // 接收message props: ['message'] ...})tips:由于HTML中的属性是不区分大小写的,所以当使用DOM中的模板(HTML中)时,驼峰写法需要转化为短横线写法。但是,如果使用字符串模板(JS中)时,不受限制,可以为所欲为。
Prop中的静态和动态值
在正常情况下,一般在父组件中通过v-bind定义一个动态值,子组件通过Prop接收该值,所以,很多人认为,Prop只能接收动态值。但是,其实Prop可以接受静态属性。
示例:
<child type="video"></child>Vue.component('child', { ... // 成功接收 props: ['type'] ...})在示例中,父组件在子组件标签上定义了静态属性type,子组件依然通过Prop拿到了静态属性type。
单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父组件的 Prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父组件以及同级子组件的状态,从而导致你的应用的数据流向难以理解。
另外,每次父组件发生更新时,子组件中所有的Prop都将刷新为最新的值。这意味着你不应该在子组件内部改变Prop,如果你这样做了,Vue会在控制台抛出一个警告。
一般来说,如果子组件需要操作Prop中的值,需要将Prop中的值赋值给本地定义的属性:
...props: ['message'],data () { return { mes: this.message }}...非Prop特性
非Props特性是指在组件上定义了属性,而又没有使用Prop接受属性。此时,子组件内不可使用该属性值,该属性会直接添加到子组件的根节点上。
比如,在一个只含有一个div的子组件上,如果我向子组件传了一个content属性,但是子组件不使用Prop接收content属性,则渲染结果为:
<div id="root"> <div content="hello"></div></div>Prop校验
子组件用Props接收父组件传来的消息有多种形式:
1.数组形式
props: [data1, data2]数组形式相当于直接接收消息,不做任何校验,一般来说,不太建议使用数组形式。
2.简单对象形式
props: { data1: String, data2: Array}简单对象形式对父组件传递的值进行了类型校验,如果传过来的值类型不一致,控制台会报错。
3.复杂对象形式
props: { data1: { type: String, required: true, default: 'default value', validator (value) { return (value.length < 5) } }, data2: { type: Array, required: true, default: () => ['', '', ''] }}复杂对象形式的情况下,作为对象属性的参数可以写为对象形式,参数对象含有4个属性,type、required、default、validator。
type:设定参数类型,当传入参数类型与type不相符时,控制台会报错
required:设定参数是否是必传,当设为true时,不传该参数会报错
default:设定默认值,当参数类型为复杂类型时,需使用工厂模式生成默认值,否则Vue会在控制台抛出警告。如图所示,就通过工厂模式生成了一个长度为3的空数组。
validator:校验器,是一个函数,拥有一个代表传入值的形参,可以自定义各种校验,当返回false时,会报错,表示没通过校验。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
前言平时写vue的时候知道props有很多种用法,今天我们来看看vue内部是怎么处理props中那么多的用法的。vue提供的props的用法1.数组形式prop
我们来聊一下vue中的组件参数.1.vue中组件参数我们可以为组件的prop指定验证要求,例如你知道的这些类型。如果有一个需求没有被满足,则Vue会在浏览器控制
如果在prop中传的值为一个没有使用特殊命名规则的变量如:(type),可以顺利传值:Vue.component("test",{props:['type'],
本文介绍了Vue2.0用watch观察prop变化(不触发),分享给大家,具体如下:A组件:exportdefault{props:{name:{type:St
vue-prop是父组件向子组件进行传递数据时使用的。例如子组件为child.vuetemplate:'msg:{{msg}}'props:['msg'],我们