品牌价值排行榜,初中毕业生登记表,强心脏110712
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时，会报错，表示没通过校验。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论