簡單理解vue中Props屬性-js教程-PHP中文網

簡單理解vue中Props屬性

高洛峰

發布： 2016-12-08 16:10:52

原創

1517 人瀏覽過

本文實例為大家解析了vue中Props的屬性，供大家參考，具體內容如下

使用 Props 傳遞資料

元件實例的作用域是孤立的。這意味著不能並且不應該在子組件的模板內直接引用父組件的資料。可以使用 props 把資料傳給子元件。

“prop” 是組件資料的一個字段，期望從父組件傳下來。子元件需要明確地用props 選項宣告props：

Vue.component(&#39;child&#39;, {
 // 声明 props
 props: [&#39;msg&#39;],
 // prop 可以用在模板内
 // 可以用 `this.msg` 设置
 template: &#39;<span>{{ msg }}</span>&#39;
})

登入後複製

然後向它傳入一個普通字串：

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 class="brush:php;toolbar:false">
 //使用 props 传输资料予子组件
 //props , data 重复名称会出现错误

登入後複製

正確寫法：

<!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 class="brush:php;toolbar:false">
 //使用 props 传输资料予子组件
 //props , data 重复名称会出现错误

登入後複製

（F

<div id="app1">
<child msg="hello!"></child>
<child nihao="hello1!"></child>
<child nisha="hello2!"></child>
</div>

登入後複製

Vue.config.debug = true;
Vue.component(&#39;child&#39;, {
// declare the props
props: [&#39;msg&#39;,&#39;nihao&#39;,&#39;nisha&#39;],
// the prop can be used inside templates, and will also
// be set as `this.msg`
template: &#39;<span>{{ msg }}{{nihao}}{{nisha}}</span>&#39;,
/*data: function() {
return {
 msg: &#39;boy&#39;
}
}*/
});
var vm = new Vue({
el: &#39;#app1&#39;
})

登入後複製

結果：hello! hello1! hello2!

第二種：

HTML

<div id="app1">
<child msg="hello!"></child>
 <child nihao="hello1!"></child>
 <child nisha="hello2!"></child>
</div>

登入後複製

結果：123hello! 123hello1! 123hello2 !

第三種：

HTML

Vue.config.debug = true;
Vue.component(&#39;child&#39;, {
// declare the props
props: [&#39;msg&#39;,&#39;nihao&#39;,&#39;nisha&#39;],
// the prop can be used inside templates, and will also
// be set as `this.msg`
template: &#39;<span>123{{ msg }}{{nihao}}{{nisha}}</span>&#39;,
/*data: function() {
return {
 msg: &#39;boy&#39;
}
}*/
});
var vm = new Vue({
el: &#39;#app1&#39;
})

登入後複製

<div id="app1">
<child msg="hello!"></child>
<child nihao="hello1!"></child>
 <child nisha="hello2!"></child>
</div>

登入後複製

2313131313135 月

第四種：

HTML

Vue.config.debug = true;
Vue.component(&#39;child&#39;, {
// declare the props
props: [&#39;msg&#39;,&#39;nihao&#39;,&#39;nisha&#39;],
// the prop can be used inside templates, and will also
// be set as `this.msg`
template: &#39;<span>{{ msg }}{{nihao}}{{nisha}}123</span>&#39;,
/*data: function() {
return {
 msg: &#39;boy&#39;
}
}*/
});
var vm = new Vue({
el: &#39;#app1&#39;
})

登入後複製

<div id="app1">
<child msg="hello!"></child>
<child nihao="hello1!"></child>
<child nisha="hello2!"></child>
</div>

登入後複製

結果：hello! 123 123hello1! 123hello
結果：hello! 123 123hello1! 123hello 2!的模板類別添加其他元素或字元會有：

1-在最前面加入—每個子組件渲染出來都會在其前面加上

2-在最後面加入—每個子組件渲染出來都會在其後面加上

3-在中間加入—他前面子組件後面加上，後面的子組件後面加上