伏龙阁资源网

深入浅析Vue中的Prop
站长资源 2024/11/27 佚名
2 0

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时，会报错，表示没通过校验。

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接