DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 簡單理解vue中Props屬性
簡單理解vue中Props屬性
編輯:關於JavaScript     

本文實例為大家解析了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前端組件學習教程》,歡迎大家學習閱讀。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved