简单理解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实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
js同源策略详解
May 21 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
Bootstrap表格使用方法详解
Feb 17 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
Cpage.js给组件绑定事件的实现代码
Aug 31 Javascript
JavaScript正则表达式函数总结(常用)
Feb 22 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
jQuery实现轮播图源码
Oct 23 jQuery
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 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开启安全模式后禁用的函数集合
2011/06/26 PHP
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
AngularJs 动态加载模块和依赖
2016/09/15 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
python 全文检索引擎详解
2017/04/25 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
python的re正则表达式实例代码
2018/01/24 Python
python3人脸识别的两种方法
2019/04/25 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
什么是岗位职责
2013/11/12 职场文书
个人职业生涯规划书1500字
2013/12/31 职场文书
大龄毕业生求职别忘职业规划
2014/03/11 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android