简单理解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 自定义类型方法小结
Mar 02 Javascript
了解了这些才能开始发挥jQuery的威力
Oct 10 Javascript
Bootstrap 附加导航(Affix)插件实例详解
Jun 01 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
简单实现js拖拽效果
Jul 25 Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 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中设置时区方法小结
2012/06/03 PHP
Function eregi is deprecated (解决方法)
2013/06/21 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
jQuery 前的按键判断代码
2010/03/19 Javascript
基本jquery的控制tabs打开的数量的代码
2010/10/17 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
vue-router的hooks用法详解
2020/06/08 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
Python实现扩展内置类型的方法分析
2017/10/16 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
用django设置session过期时间的方法解析
2019/08/05 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
《花瓣飘香》教学反思
2014/04/15 职场文书
县级文明单位申报材料
2014/05/23 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
物业工程部经理岗位职责
2015/04/09 职场文书
校车安全管理责任书
2015/05/11 职场文书
功夫熊猫观后感
2015/06/10 职场文书