简单理解vue中Props属性
本文实例为大家解析了vue中Props的属性，供大家参考，具体内容如下
使用Props传递数据
组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用props把数据传给子组件。
“prop”是组件数据的一个字段，期望从父组件传下来。子组件需要显式地用props选项声明props：
Vue.component('child',{
//声明props
props:['msg'],
//prop可以用在模板内
//可以用`this.msg`设置
template:'<span>{{msg}}</span>'
})
然后向它传入一个普通字符串：
<childmsg="hello!"></child>
举例
错误写法：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<scripttype="text/javascript"src="./vue.js"></script>
<metacharset="UTF-8">
<title>vue.js</title>
</head>
<body>
<pre>
//使用props传输资料予子组件
//props,data重复名称会出现错误
</pre>
<divid="app1">
<childmssage="hello!"></child>
</div>
<script>
Vue.config.debug=true;
Vue.component('child',{
//declaretheprops
props:['msg','nihao','nisha'],
//thepropcanbeusedinsidetemplates,andwillalso
//besetas`this.msg`
template:'<span>{{msg}}{{nihao}}{{nisha}}</span>',
data:function(){
return{
mssage:'boy'
}
}
});
varvm=newVue({
el:'#app1'
})
</script>
</body>
</html>
正确写法：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<scripttype="text/javascript"src="./vue.js"></script>
<metacharset="UTF-8">
<title>vue.js</title>
</head>
<body>
<pre>
//使用props传输资料予子组件
//props,data重复名称会出现错误
</pre>
<divid="app1">
<childmssage="hello!"></child>
</div>
<script>
Vue.config.debug=true;
Vue.component('child',{
//declaretheprops
props:['msg','nihao','nisha'],
//thepropcanbeusedinsidetemplates,andwillalso
//besetas`this.msg`
template:'<span>{{msg}}{{nihao}}{{nisha}}</span>'
});
varvm=newVue({
el:'#app1'
})
</script>
</body>
</html>
props传入多个数据（顺序问题）
第一种：
HTML
<divid="app1"> <childmsg="hello!"></child> <childnihao="hello1!"></child> <childnisha="hello2!"></child> </div>
JS
Vue.config.debug=true;
Vue.component('child',{
//declaretheprops
props:['msg','nihao','nisha'],
//thepropcanbeusedinsidetemplates,andwillalso
//besetas`this.msg`
template:'<span>{{msg}}{{nihao}}{{nisha}}</span>',
/*data:function(){
return{
msg:'boy'
}
}*/
});
varvm=newVue({
el:'#app1'
})
结果：hello!hello1!hello2!
第二种：
HTML
<divid="app1"> <childmsg="hello!"></child> <childnihao="hello1!"></child> <childnisha="hello2!"></child> </div>
JS
Vue.config.debug=true;
Vue.component('child',{
//declaretheprops
props:['msg','nihao','nisha'],
//thepropcanbeusedinsidetemplates,andwillalso
//besetas`this.msg`
template:'<span>123{{msg}}{{nihao}}{{nisha}}</span>',
/*data:function(){
return{
msg:'boy'
}
}*/
});
varvm=newVue({
el:'#app1'
})
结果：123hello!123hello1!123hello2!
第三种：
HTML
<divid="app1"> <childmsg="hello!"></child> <childnihao="hello1!"></child> <childnisha="hello2!"></child> </div>
JS
Vue.config.debug=true;
Vue.component('child',{
//declaretheprops
props:['msg','nihao','nisha'],
//thepropcanbeusedinsidetemplates,andwillalso
//besetas`this.msg`
template:'<span>{{msg}}{{nihao}}{{nisha}}123</span>',
/*data:function(){
return{
msg:'boy'
}
}*/
});
varvm=newVue({
el:'#app1'
})
结果：hello!123hello1!123hello2!123
第四种：
HTML
<divid="app1"> <childmsg="hello!"></child> <childnihao="hello1!"></child> <childnisha="hello2!"></child> </div>
JS
Vue.config.debug=true;
Vue.component('child',{
//declaretheprops
props:['msg','nihao','nisha'],
//thepropcanbeusedinsidetemplates,andwillalso
//besetas`this.msg`
template:'<span>{{msg}}123{{nihao}}{{nisha}}123</span>',
/*data:function(){
return{
msg:'boy'
}
}*/
});
varvm=newVue({
el:'#app1'
})
结果：hello!123123hello1!123hello2!
结论：
在props中传入多个数据是，如果在父组件的模板类添加其他元素或者字符会有：
1-在最前面加入—每个子组件渲染出来都会在其前面加上
2-在最后面加入—每个子组件渲染出来都会在其后面加上
3-在中间加入—他前面子组件后面加上，后面的子组件后面加上
参考：http://cn.vuejs.org/guide/components.html#Props
本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。