欢迎来到[自学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

保利尼奥踢73场还给不休息?巴萨有这4人足够了 危险物质惊扰美军基地:5人流鼻血 紧挨五角大楼 於之莹成男女围甲两栖棋手 丁波:优先考虑她 福原爱夫妇夜间约会高甜撒糖 出门30分钟就想娃 阿森纳神经刀:我要挑战主力位置 C罗还总挨批呢 军报头版头条缅怀这位军转干部 网名“老吕叨叨” 不是人是牲畜 这样说非法移民的特朗普被骂亏吗? 美对华贸易战恶果蔓延 高通收购恩智浦存变数 活该他进全明星啊!33分打懵比老大! 台前官员退党参选台北市长 怼柯文哲:台不需网红 北京今晨空气质量达重度污染 明天冷空气来袭 人民日报海外版:政协这五年 工作不平凡
进球GIF-李提香后场精准长传 扎哈维凌空抽射破僵 省委原常委涉案7500万 任职地曾出轰动全国贿选案 耀才证券:美企绩优三大指数扬 港股三万关攻防战 美国大爷嫌领居孩子太吵 掏出AK-47向其扫射 空转360还能打进!除了他整个NBA几人能做到? 公民偷拍并举报干部违纪被判罪 怎样监督不踩红线 高通宣布放弃NXP收购计划:陷入困境但将继续前进 卡佩罗:拉米雷斯身体不适缺阵 博阿基耶下周或首秀 早产儿失明鉴定书称医院无错 涉事单位被停执3月 强对流天气黄色预警:10省有雷暴大风或短时强降水 白宫:“全心期待”美朝领导人会面 男子犯案潜逃六年 父亲装病“骗”回家自首
法制网评:“严书记”被查 说来戏谑实则必然 德媒:德急需“中国技能” 须从中学生抓起 女子3000元买下“玉砚” 原来是玻璃做的 可口可乐在美国涨价了 韩呈恺/周昊东:表现打70分 下场拼世界第1很兴奋 本季最长连胜get!骑士勇士都仰着头看最强火箭 自我还是他者:我们该如何定义寄生虫? 联通员工股权激励计划已制定好名单 正进行内部公示 春节快递慢了?国家邮政局:几百万快递小哥也要回家 加盟什么店最赚钱 品牌设计公司排行榜 白手起家好项目 白手起家什么意思 AG亚游集团