Einfaches Verständnis des Props-Attributs in Vue-js-Tutorial-php.cn

Einfaches Verständnis des Props-Attributs in Vue

高洛峰

Freigeben： 2016-12-08 16:10:52

Original

1517 Leute haben es durchsucht

Das Beispiel in diesem Artikel analysiert die Eigenschaften von Props in Vue als Referenz. Der spezifische Inhalt ist wie folgt:

Verwenden Sie Props zum Übertragen von Daten

Der Umfang der Komponenteninstanz ist isoliert . Dies bedeutet, dass die Daten der übergeordneten Komponente nicht direkt in der Vorlage der untergeordneten Komponente referenziert werden können und sollten. Sie können Requisiten verwenden, um Daten an untergeordnete Komponenten zu übergeben.

„prop“ ist ein Feld mit Komponentendaten, die voraussichtlich von der übergeordneten Komponente weitergegeben werden. Unterkomponenten müssen props explizit mit der props-Option deklarieren:

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

Nach dem Login kopieren

und ihm dann eine normale Zeichenfolge übergeben:

< ;child msg="hello!">

Beispiel

Falsche Schreibweise:

<!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 重复名称会出现错误

Nach dem Login kopieren

Richtiges Schreiben:

<!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 重复名称会出现错误

Nach dem Login kopieren

Requisiten, die mehrere Daten übergeben (Sequenzproblem)

Erster Typ:

HTML

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

Nach dem Login kopieren

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;
})

Nach dem Login kopieren

Ergebnis: hallo! hallo1!

Zweitens:

HTML

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

Nach dem Login kopieren

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;
})

Nach dem Login kopieren

Ergebnis: 123hello! 123hello1! 123hello2!

Der dritte Typ:

HTML

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

Nach dem Login kopieren

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;
})

Nach dem Login kopieren

Ergebnis: hallo! 123 hallo1! 123 hallo2!123

Der vierte Typ:

HTML 🎜>

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

Nach dem Login kopieren

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 }}123{{nihao}}{{nisha}}123</span>&#39;,
/*data: function() {
return {
 msg: &#39;boy&#39;
}
}*/
});
var vm = new Vue({
el: &#39;#app1&#39;
})

Nach dem Login kopieren

Ergebnis: Hallo! 123 123Hallo1! 123Hallo2! Daten werden in Requisiten übergeben. Wenn Sie der Vorlagenklasse der übergeordneten Komponente andere Elemente oder Zeichen hinzufügen, gibt es Folgendes:

1-An der Vorderseite hinzufügen – Wenn jede Unterkomponente gerendert wird,

wird davor hinzugefügt. 2-Fügen Sie es am Ende hinzu. Wenn jede Unterkomponente gerendert wird, wird sie

danach hinzugefügt es. Fügen Sie nach der Komponente hinzu, fügen Sie

nach der nachfolgenden Unterkomponente hinzu