简单理解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字典探测用户名工具
Oct 05 Javascript
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
zTree插件下拉树使用入门教程
Apr 11 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
May 12 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 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
dedecms模版制作使用方法
2007/04/03 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
2012/09/14 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
Bootstrap风格的WPF样式
2016/12/07 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
使用JS来动态操作css的几种方法
2019/12/18 Javascript
python实现连接mongodb的方法
2015/05/08 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
Django中的静态文件管理过程解析
2019/08/01 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
儿科主治医生个人求职信
2013/09/23 职场文书
学生自我鉴定范文
2013/10/04 职场文书
中学生学习生活的自我评价
2013/10/26 职场文书
经理职责范文
2013/11/08 职场文书
优秀毕业生自我鉴定
2014/02/11 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
市场营销计划书
2015/01/17 职场文书
详解CocosCreator项目结构机制
2021/04/14 Javascript
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python