简单理解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中的对象和数组的应用技巧
Jan 07 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
Aug 29 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 Javascript
简单理解js的prototype属性及使用
Dec 07 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
jQuery 判断元素整理汇总
Feb 28 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 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
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
js 操作select相关方法函数
2009/12/06 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
AngularJS语法详解
2015/01/23 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
基于iview的router常用控制方式
2019/05/30 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python中的生成器和yield详细介绍
2015/01/09 Python
在Linux下调试Python代码的各种方法
2015/04/17 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
R语言 vs Python对比:数据分析哪家强?
2017/11/17 Python
python高阶爬虫实战分析
2018/07/29 Python
Python的缺点和劣势分析
2019/11/19 Python
解决Python3下map函数的显示问题
2019/12/04 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
财务工作者先进事迹材料
2014/01/17 职场文书
运动会入场解说词300字
2014/01/25 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
中学生演讲稿
2014/04/26 职场文书
绿色环保演讲稿
2014/05/10 职场文书
党员教师一句话承诺
2014/05/30 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
五一劳动节慰问信
2015/02/14 职场文书
部门主管竞聘书
2015/09/15 职场文书
从原生JavaScript到React深入理解
2022/07/23 Javascript