简单理解vue中Props属性


Posted in Javascript onOctober 27, 2016

本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下

使用 Props 传递数据

组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

“prop” 是组件数据的一个字段,期望从父组件传下来。子组件需要显式地用 props 选项 声明 props:

Vue.component('child', {
 // 声明 props
 props: ['msg'],
 // prop 可以用在模板内
 // 可以用 `this.msg` 设置
 template: '<span>{{ msg }}</span>'
})

然后向它传入一个普通字符串:

<child msg="hello!"></child>

举例

错误写法:

<!DOCTYPE html>
<html lang="en">

<head>
 <script type="text/javascript" src="./vue.js"></script>
 <meta charset="UTF-8">
 <title>vue.js</title>
</head>

<body>
<pre>
 //使用 props 传输资料予子组件
 //props , data 重复名称会出现错误


</pre>
<div id="app1">
 <child mssage="hello!"></child>
</div>
<script>
 Vue.config.debug = true;
 Vue.component('child', {
 // declare the props
 props: ['msg','nihao','nisha'],
 // the prop can be used inside templates, and will also
 // be set as `this.msg`
 template: '<span>{{ msg }}{{nihao}}{{nisha}}</span>',
 data: function() {
 return {
 mssage: 'boy'
 }
 }
 });
 var vm = new Vue({
 el: '#app1'
 })
</script>
</body>

</html>

正确写法:

<!DOCTYPE html>
<html lang="en">

<head>
 <script type="text/javascript" src="./vue.js"></script>
 <meta charset="UTF-8">
 <title>vue.js</title>
</head>

<body>
<pre>
 //使用 props 传输资料予子组件
 //props , data 重复名称会出现错误


</pre>
<div id="app1">
 <child mssage="hello!"></child>
</div>
<script>
 Vue.config.debug = true;
 Vue.component('child', {
 // declare the props
 props: ['msg','nihao','nisha'],
 // the prop can be used inside templates, and will also
 // be set as `this.msg`
 template: '<span>{{ msg }}{{nihao}}{{nisha}}</span>'
 });
 var vm = new Vue({
 el: '#app1'
 })
</script>
</body>

</html>

props 传入多个数据(顺序问题)

第一种:

HTML             

<div id="app1">
<child msg="hello!"></child>
<child nihao="hello1!"></child>
<child nisha="hello2!"></child>
</div>

JS

Vue.config.debug = true;
 Vue.component('child', {
 // declare the props
 props: ['msg','nihao','nisha'],
 // the prop can be used inside templates, and will also
 // be set as `this.msg`
 template: '<span>{{ msg }}{{nihao}}{{nisha}}</span>',
 /*data: function() {
 return {
 msg: 'boy'
 }
 }*/
 });
 var vm = new Vue({
 el: '#app1'
 })

结果:hello! hello1! hello2!

第二种:

HTML

<div id="app1">
<child msg="hello!"></child>
 <child nihao="hello1!"></child>
 <child nisha="hello2!"></child>
</div>

JS

Vue.config.debug = true;
 Vue.component('child', {
 // declare the props
 props: ['msg','nihao','nisha'],
 // the prop can be used inside templates, and will also
 // be set as `this.msg`
 template: '<span>123{{ msg }}{{nihao}}{{nisha}}</span>',
 /*data: function() {
 return {
 msg: 'boy'
 }
 }*/
 });
 var vm = new Vue({
 el: '#app1'
 })

结果:123hello! 123hello1! 123hello2!

第三种:

HTML

<div id="app1">
<child msg="hello!"></child>
<child nihao="hello1!"></child>
 <child nisha="hello2!"></child>
</div>

JS

Vue.config.debug = true;
 Vue.component('child', {
 // declare the props
 props: ['msg','nihao','nisha'],
 // the prop can be used inside templates, and will also
 // be set as `this.msg`
 template: '<span>{{ msg }}{{nihao}}{{nisha}}123</span>',
 /*data: function() {
 return {
 msg: 'boy'
 }
 }*/
 });
 var vm = new Vue({
 el: '#app1'
 })

结果:hello! 123 hello1! 123 hello2!123

第四种:

HTML                 

<div id="app1">
<child msg="hello!"></child>
<child nihao="hello1!"></child>
<child nisha="hello2!"></child>
</div>

JS

Vue.config.debug = true;
 Vue.component('child', {
 // declare the props
 props: ['msg','nihao','nisha'],
 // the prop can be used inside templates, and will also
 // be set as `this.msg`
 template: '<span>{{ msg }}123{{nihao}}{{nisha}}123</span>',
 /*data: function() {
 return {
 msg: 'boy'
 }
 }*/
 });
 var vm = new Vue({
 el: '#app1'
 })

结果:hello! 123 123hello1! 123hello2!

结论:

在props 中传入多个数据是,如果在父组件的模板类添加其他元素或者字符会有:
1-在最前面加入—每个子组件渲染出来都会在其前面加上

2-在最后面加入—每个子组件渲染出来都会在其后面加上

3-在中间加入—他前面子组件后面加上,后面的子组件后面加上

参考: http://cn.vuejs.org/guide/components.html#Props

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 字符串乘法
Aug 20 Javascript
JavaScript Scoping and Hoisting 翻译
Jul 03 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
js同源策略详解
May 21 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
Aug 15 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 Javascript
详解Javascript实践中的命令模式
May 05 Javascript
利用React-router+Webpack快速构建react程序
Oct 27 #Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 #Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 #Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 #Javascript
简单理解vue中track-by属性
Oct 26 #Javascript
javascript iframe跨域详解
Oct 26 #Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 #Javascript
You might like
php smarty模版引擎中变量操作符及使用方法
2009/12/11 PHP
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
漂亮! js实现颜色渐变效果
2016/08/12 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
python实现文件分组复制到不同目录的例子
2014/06/04 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
Python就将所有的英文单词首字母变成大写
2021/02/12 Python
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
实习护理工作自我评价
2013/09/25 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
生日宴会主持词
2014/03/20 职场文书
就业协议书怎么填
2014/04/11 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
交通安全责任书范本
2014/07/24 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
授权委托书
2015/01/28 职场文书
文案策划岗位职责
2015/02/11 职场文书
python+opencv实现目标跟踪过程
2022/06/21 Python