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中的Prop的更多相关文章

  1. 浅谈Vue中计算属性(computed)和方法(methods)的差别

    浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...

  2. 浅谈Vue中计算属性computed的实现原理

    虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用V ...

  3. 浅谈Vue中Slot以及slot-scope

    vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学 ...

  4. 浅谈vue中的计算属性和侦听属性

    计算属性 计算属性用于处理复杂的业务逻辑 计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性 ...

  5. 浅谈Vue中的$set的使用

    在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新 ...

  6. 浅谈Vue.js

    作为一名Vue.js的忠实用户,我想有必要写点文章来歌颂这一门美好的语言了,我给它的总体评价是“简单却不失优雅,小巧而不乏大匠”,下面将围绕这句话给大家介绍Vue.js,希望能够激发你对Vue.js的 ...

  7. 浅谈Vue不同场景下组件间的数据交流

    浅谈Vue不同场景下组件间的数据“交流”   Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...

  8. 【Vue】浅谈Vue不同场景下组件间的数据交流

    浅谈Vue不同场景下组件间的数据“交流”   Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...

  9. 浅谈Vue响应式(数组变异方法)

    很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...

随机推荐

  1. 20分钟成功编写bootstrap响应式页面 就这么简单

    最近发现一个叫 Bootstrap 的好东西,Bootstrap 是现在最流行的响应式 CSS 框架,它以移动设备优先,能够快速适应不同设备.使用它编写响应式页面快捷.方便,而且屏蔽了浏览器差异.使用 ...

  2. 在input文本框中存入对象格式的数据

    <input id="teaching" type="hidden" name="teachingProgram" /> JQ: ...

  3. angular2+ 引用layDate日期选择插件

    layDate日期选择插件使用npm安装好像是行不通的,但angular2+的日期选择控件库又不能够支持时分秒的选择 在angular项目中引用layDate 1. 首先官网下载layDate独立版, ...

  4. Centos7.2yum安装时候出现db5错误的解决办法

    Centos7.2使用yum安装软件是出现如此错误提示 解决办法 删除 /var/lib/rpm文件夹下面所有以__db开头的文件

  5. vim简单的配置

    "设置当文件被改动时自动载入 set autoread "在左侧行号 set nu "tab长度为4 "覆盖文件时不备份 set nobackup " ...

  6. http协议------>概述和动手实践认识Http协议

    http协议是用来定义客户端和web服务器通讯格式 浏览器与服务器的交互过程 是tcp/ip的应用层 版本:http/1.0(客户端和web服务器建立连接后只能访问一个web资源)   http/1. ...

  7. Xcode升级了6.3 出现的警告:Auto property synthesis will not synthesize property

    1.  Auto property synthesis will not synthesize property 'title'; it will be implemented by its supe ...

  8. CSS cursor 属性

    cursor 1.定义和用法 cursor 属性规定要显示的光标的类型(形状). 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围). 2 ...

  9. oracle 归档空间满的解决办法

    问题现象: 通过命令提示符登陆数据库,一般提示“ora-03113:通信通道的文件结尾”错误,查看trace日志,可以看到详细信息.部分摘录如下(橙色部分给出了建议方案): Errors in fil ...

  10. PHP 错误日志

    display_errors 错误回显,一般常用语开发模式,但是很多应用在正式环境中也忘记了关闭此选项.错误回显可以暴露出非常多的敏感信息,为攻击者下一步攻击提供便利.推荐关闭此选项. display ...