suchen

Heim  >  Artikel  >  Web-Frontend  >  Einfaches Verständnis des Props-Attributs in Vue

Einfaches Verständnis des Props-Attributs in Vue

高洛峰
高洛峰Original
2016-12-08 16:10:521491Durchsuche

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('child', {
 // 声明 props
 props: ['msg'],
 // prop 可以用在模板内
 // 可以用 `this.msg` 设置
 template: &#39;<span>{{ msg }}</span>&#39;
})


und ihm dann eine normale Zeichenfolge übergeben:

< ;child msg="hello!">7d4dd9c7239aac360e401efe89cbb393

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 重复名称会出现错误
<script> 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 { mssage: &#39;boy&#39; } } }); var vm = new Vue({ el: &#39;#app1&#39; }) </script>


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 重复名称会出现错误
<script> 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; }); var vm = new Vue({ el: &#39;#app1&#39; }) </script>


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>


JS

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


Ergebnis: hallo! hallo1!

Zweitens:

HTML

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


JS

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


Ergebnis: 123hello! 123hello1! 123hello2!

Der dritte Typ:

HTML

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


JS

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


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>

JS


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

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So steuern Sie mit js die Bildlaufleiste eines Divs, sodass es automatisch nach unten scrollt, wenn der Inhalt aktualisiert wirdNächster Artikel：So steuern Sie mit js die Bildlaufleiste eines Divs, sodass es automatisch nach unten scrollt, wenn der Inhalt aktualisiert wird

In Verbindung stehende Artikel

Mehr sehen