欢迎来到[自学php网] ①群 AG亚游集团

AG亚游集团 > 网站前端 > vue教程 >

简单理解vue中Props属性

来源:未知 ?? 时间:2018-11-04 15:10?作者:小飞侠

[导读] 使用 Props 传递数据 组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。 “prop” 是组件数据的一个字段...

使用 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-在中间加入—他前面子组件后面加上,后面的子组件后面加上


请大家多多支持自学php网,zixuephp.com

最新文章

点击排行

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号@版权所有AG亚游集团

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

梅西:位置回撤我依然进球 最喜欢过皇马4人破门 希腊民众被山火围困跳海求生视频曝光 如世界末日 莎娃与绯闻男友牵手外出 男方超帅交好哈里王子 德国总理默克尔今将宣誓就职 迈向第四个总理任期 这名被双开的“堕落院士”干了啥? 女子将20只手表绑腰间入关 箱内还有大量韩国衣帽 上海团58名人大代表有哪些新面孔?官员农民工都有 曾诚:这一个月学了几套功夫 倒地站起不畏挑战 名宿称勇士当今最强!夺冠后都感觉常规赛无聊 加图索:次回合全力阻击阿森纳 要对得起米兰球衣 佛系登!火箭制巨型哈登头像引围观 逼真度100% 华尔街日报:腾讯越来越像软银 通过投资排挤竞争对手
京雄城际铁路雄县段进入实质性施工阶段 耀才证券陈伟聪:港汇偏弱 大市成交或持续低迷 美国化学学会:大猩猩玻璃该应用于更多的消费品中 美新税法前最后一次报税 个人如何避免罚款省税 法国时尚品牌纪梵希创始人纪梵希去世 享年91岁 羊城晚报评“公公强吻儿媳”:闹婚不纠偏滑稽不停 台反“年改”群众怒扯民进党党旗后解散 扬言再战 有两人比阿联斯隆更危险 新疆应用车轮战策略 法前国务秘书侮辱女性遭拘 骂对方“肮脏的婊子” 基金经理:美联储反复强调一件事 美债投资人很受伤 广州一中学校长:要以选女婿儿媳的标准来要求孩子 外媒评英超史上最强big4:瓜帅曼城+三冠王曼联
2017年12月70城房价变化出炉 二三线城市环比微涨 政协委员:中国902万留守儿童 最大问题是缺乏亲情 浙江代表团审议宪法修正案草案 王晨车俊参加(图) 警方披露空姐遇害案细节:从两方面对嫌犯进行搜捕 韩媒:35具遭日强征韩国劳工遗骸8月将返韩 美国欲打造“阿拉伯版北约”牵制伊朗 四川绵阳市北川县发生3.2级地震 震源深度11千米 以美举行反导联合军演 重点防御大规模弹道导弹攻击 研究发现:突然由富变贫 死亡风险上升50% 适合女生职业的排行榜 今年开什么店好 今年开什么店好 微信赚钱的三大方法 AG亚游集团