Vue的Props属性概述
生活随笔
收集整理的這篇文章主要介紹了
Vue的Props属性概述
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
使用 Props 傳遞數據
組件實例的作用域是孤立的。這意味著不能并且不應該在子組件的模板內直接引用父組件的數據。可以使用 props 把數據傳給子組件。
“prop” 是組件數據的一個字段，期望從父組件傳下來。子組件需要顯式地用 props 選項 聲明 props：
Vue.component('child', {// 聲明 propsprops: ['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 propsprops: ['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 propsprops: ['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 propsprops: ['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 propsprops: ['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 propsprops: ['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 propsprops: ['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的Props属性概述的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 招商银行app怎么更新身份证信息
- 下一篇： vue的props实现父组件变化子组件一