Vue组件选项props实例详解


Posted in Javascript onAugust 18, 2017

前面的话

组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项。在 Vue 中,父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。本文将详细介绍Vue组件选项props

Vue组件选项props实例详解

静态props

组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,需要通过子组件的 props 选项

使用Prop传递数据包括静态和动态两种形式,下面先介绍静态props

子组件要显式地用 props 选项声明它期待获得的数据

var childNode = {
 template: '<div>{{message}}</div>',
 props:['message']
}

静态Prop通过为子组件在父组件中的占位符添加特性的方式来达到传值的目的

<div id="example">
 <parent></parent>
</div>
<script>
var childNode = {
 template: '<div>{{message}}</div>',
 props:['message']
}
var parentNode = {
 template: `
 <div class="parent">
 <child message="aaa"></child>
 <child message="bbb"></child>
 </div>`,
 components: {
 'child': childNode
 }
};
// 创建根实例
new Vue({
 el: '#example',
 components: {
 'parent': parentNode
 }
})
</script>

Vue组件选项props实例详解

命名约定

对于props声明的属性来说,在父级HTML模板中,属性名需要使用中划线写法

var parentNode = {
 template: `
 <div class="parent">
 <child my-message="aaa"></child>
 <child my-message="bbb"></child>
 </div>`,
 components: {
 'child': childNode
 }
};

子级props属性声明时,使用小驼峰或者中划线写法都可以;而子级模板使用从父级传来的变量时,需要使用对应的小驼峰写法

var childNode = {
 template: '<div>{{myMessage}}</div>',
 props:['myMessage']
}
var childNode = {
 template: '<div>{{myMessage}}</div>',
 props:['my-message']
}

动态props

在模板中,要动态地绑定父组件的数据到子模板的 props,与绑定到任何普通的HTML特性相类似,就是用 v-bind。每当父组件的数据变化时,该变化也会传导给子组件

var childNode = {
 template: '<div>{{myMessage}}</div>',
 props:['myMessage']
}
var parentNode = {
 template: `
 <div class="parent">
 <child :my-message="data1"></child>
 <child :my-message="data2"></child>
 </div>`,
 components: {
 'child': childNode
 },
 data(){
 return {
 'data1':'aaa',
 'data2':'bbb'
 }
 }
};

传递数字

初学者常犯的一个错误是使用字面量语法传递数值

<!-- 传递了一个字符串 "1" -->
<comp some-prop="1"></comp>
<div id="example">
 <my-parent></my-parent>
</div>
<script>
var childNode = {
 template: '<div>{{myMessage}}的类型是{{type}}</div>',
 props:['myMessage'],
 computed:{
 type(){
 return typeof this.myMessage
 }
 }
}
var parentNode = {
 template: `
 <div class="parent">
 <my-child my-message="1"></my-child>
 </div>`,
 components: {
 'myChild': childNode
 }
};
// 创建根实例
new Vue({
 el: '#example',
 components: {
 'MyParent': parentNode
 }
})
</script>

Vue组件选项props实例详解

因为它是一个字面 prop,它的值是字符串 "1" 而不是 number。如果想传递一个实际的 number,需要使用 v-bind,从而让它的值被当作JS表达式计算

<!-- 传递实际的 number -->
<comp v-bind:some-prop="1"></comp>
var parentNode = {
 template: `
 <div class="parent">
 <my-child :my-message="1"></my-child>
 </div>`,
 components: {
 'myChild': childNode
 }
};

Vue组件选项props实例详解

或者可以使用动态props,在data属性中设置对应的数字1

var parentNode = {
 template: `
 <div class="parent">
 <my-child :my-message="data"></my-child>
 </div>`,
 components: {
 'myChild': childNode
 },
 data(){
 return {
 'data': 1
 }
 }
};

props验证

可以为组件的 props 指定验证规格。如果传入的数据不符合规格,Vue会发出警告。当组件给其他人使用时,这很有用

要指定验证规格,需要用对象的形式,而不能用字符串数组

Vue.component('example', {
 props: {
 // 基础类型检测 (`null` 意思是任何类型都可以)
 propA: Number,
 // 多种类型
 propB: [String, Number],
 // 必传且是字符串
 propC: {
 type: String,
 required: true
 },
 // 数字,有默认值
 propD: {
 type: Number,
 default: 100
 },
 // 数组/对象的默认值应当由一个工厂函数返回
 propE: {
 type: Object,
 default: function () {
 return { message: 'hello' }
 }
 },
 // 自定义验证函数
 propF: {
 validator: function (value) {
 return value > 10
 }
 }
 }
})

type 可以是下面原生构造器

String
Number
Boolean
Function
Object
Array
Symbol

type 也可以是一个自定义构造器函数,使用 instanceof 检测。

当 prop 验证失败,Vue 会在抛出警告 (如果使用的是开发版本)。props会在组件实例创建之前进行校验,所以在 default 或 validator 函数里,诸如 data、computed 或 methods 等实例属性还无法使用

下面是一个简单例子,如果传入子组件的message不是数字,则抛出警告

<div id="example">
 <parent></parent>
</div>
<script>
var childNode = {
 template: '<div>{{message}}</div>',
 props:{
 'message':Number
 }
}
var parentNode = {
 template: `
 <div class="parent">
 <child :message="msg"></child>
 </div>`,
 components: {
 'child': childNode
 },
 data(){
 return{
 msg: '123'
 }
 }
};
// 创建根实例
new Vue({
 el: '#example',
 components: {
 'parent': parentNode
 }
})
</script>

传入数字123时,则无警告提示。传入字符串'123'时,结果如下所示

Vue组件选项props实例详解

将上面代码中,子组件的内容修改如下,可自定义验证函数,当函数返回为false时,则输出警告提示

var childNode = {
 template: '<div>{{message}}</div>',
 props:{
 'message':{
 validator: function (value) {
 return value > 10
 }
 }
 }
}

在父组件中传入msg值为1,由于小于10,则输出警告提示

var parentNode = {
 template: `
 <div class="parent">
 <child :message="msg"></child>
 </div>`,
 components: {
 'child': childNode
 },
 data(){
 return{
 msg:1
 }
 }
};

Vue组件选项props实例详解

单向数据流

prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解

另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着不应该在子组件内部改变 prop。如果这么做了,Vue 会在控制台给出警告

下面是一个典型例子

<div id="example">
 <parent></parent>
</div>
<script>
var childNode = {
 template: `
 <div class="child">
 <div>
 <span>子组件数据</span>
 <input v-model="childMsg">
 </div>
 <p>{{childMsg}}</p>
 </div>
 `,
 props:['childMsg']
}
var parentNode = {
 template: `
 <div class="parent">
 <div>
 <span>父组件数据</span>
 <input v-model="msg">
 </div>
 <p>{{msg}}</p>
 <child :child-msg="msg"></child>
 </div>
 `,
 components: {
 'child': childNode
 },
 data(){
 return {
 'msg':'match'
 }
 }
};
// 创建根实例
new Vue({
 el: '#example',
 components: {
 'parent': parentNode
 }
})
</script>

父组件数据变化时,子组件数据会相应变化;而子组件数据变化时,父组件数据不变,并在控制台显示警告

Vue组件选项props实例详解

修改prop中的数据,通常有以下两种原因

1、prop 作为初始值传入后,子组件想把它当作局部数据来用

2、prop 作为初始值传入,由子组件处理成其它数据输出

对于这两种情况,正确的应对方式是

1、定义一个局部变量,并用 prop 的值初始化它

props: ['initialCounter'],
data: function () {
 return { counter: this.initialCounter }
}

2、定义一个计算属性,处理 prop 的值并返回

props: ['size'],
computed: {
 normalizedSize: function () {
 return this.size.trim().toLowerCase()
 }
}

[注意]JS中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态

总结

以上所述是小编给大家介绍的Vue组件选项props实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript的并行运算实现代码
Nov 19 Javascript
Jquery图形报表插件 jqplot简介及参数详解
Oct 10 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
bootstrap下拉菜单使用方法解析
Jan 13 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
js截取字符串功能的实现方法
Sep 27 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 #Javascript
Node.JS更改Windows注册表Regedit的方法小结
Aug 18 #Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 #Javascript
Vue中引入样式文件的方法
Aug 18 #Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 #jQuery
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 #Javascript
select自定义小三角样式代码(实用总结)
Aug 18 #Javascript
You might like
《PHP边学边教》(01.开篇――准备工作)
2006/12/13 PHP
php实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
PHP 动态随机生成验证码类代码
2010/04/09 PHP
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
jQuery中filter()和find()的区别深入了解
2013/09/25 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
深入理解JS DOM事件机制
2016/08/06 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
python实现复制整个目录的方法
2015/05/12 Python
Python sys.argv用法实例
2015/05/28 Python
python常见的格式化输出小结
2016/12/15 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
python实现多线程网页下载器
2018/04/15 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
appium+python adb常用命令分享
2020/03/06 Python
python matplotlib库的基本使用
2020/09/23 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
机电专业体育教师求职信
2013/09/21 职场文书
农业资源与环境专业自荐信范文
2013/12/30 职场文书
节能标语大全
2014/06/21 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
同步小康驻村工作简报
2015/07/20 职场文书
浅析Python OpenCV三种滤镜效果
2022/04/11 Python