So bedienen Sie Vue-Komponenten und verwenden Requisiten zum Übergeben von Daten

Dieses Mal zeige ich Ihnen, wie Sie beim Betrieb einer Vue-Komponente Requisiten zum Übergeben von Daten verwenden , lass uns einen Blick darauf werfen. In Vue kann die Beziehung zwischen übergeordneten und untergeordneten Komponenten so zusammengefasst werden, dass Requisiten nach unten und Ereignisse nach oben weitergeleitet werden. Die übergeordnete Komponente sendet Daten über Requisiten an die untergeordnete Komponente, und die untergeordnete Komponente sendet über Ereignisse Nachrichten

an die übergeordnete Komponente

. Sehen Sie, wie sie funktionieren.

1. Grundlegende Verwendung Bei Komponenten geht es nicht nur um die Wiederverwendung des Inhalts von Vorlagen Wichtig ist die Kommunikation zwischen den Komponenten.

Verwenden Sie in der Komponente die Option props, um die Daten zu deklarieren, die vom übergeordneten Element empfangen werden müssen. Der Wert von props kann zwei Typen haben: einer ist ein

String

-Array und der andere ist Objekt.

1.1 String-Array:

  <p id="app4">
   <my-component4 message="数据来自父组件"></my-component4>
  </p>
Vue.component('my-component4',{
 props: ['message'],
 template: '<p>{{message}}</p>'
});
var app4 = new Vue({
 el: '#app4'
});

Das Ergebnis nach dem Rendern ist:

<p id= ” app4”>
　　<p ＞来自父组件的数据＜／ p>
</p>

Die in Requisiten deklarierten Daten und die von der Komponentendatenfunktion zurückgegebenen Daten Der Unterschied besteht hauptsächlich darin, dass die Requisiten vom übergeordneten Element stammen, während die Daten in den Daten die eigenen Daten der Komponente sind und der Bereich die Komponente selbst ist. Beide Daten können in der Vorlage, den berechneten Eigenschaften und

verwendet werden Methoden

s. Die Datennachricht im obigen Beispiel wird vom übergeordneten Element über Requisiten weitergegeben. Schreiben Sie den Namen der Requisiten direkt auf das benutzerdefinierte Tag der Komponente. Wenn Sie mehrere Daten übergeben möchten, fügen Sie einfach Elemente in die Requisiten ein Array.

Manchmal sind die übergebenen Daten nicht direkt fest codiert, sondern dynamische Daten vom übergeordneten Element. In diesem Fall können Sie den Wert von props dynamisch binden Änderungen an der übergeordneten Komponente werden auch an die untergeordneten Komponenten weitergegeben.

  <p id="app5">
   <input type="text" v-model="text">
   <my-component5 :my-text="text"></my-component5>
  </p>
Vue.component('my-component5',{
 props: ['myText'],
 template: '<p>{{myText}}</p>'
});
var app5 = new Vue({
 el: '#app5',
 data: {
  text: '动态传递父组件数据'
 }
});

Ein paar Punkte, die Sie beachten sollten:

1. Wenn Sie Zahlen, boolesche Werte, Arrays und Objekte direkt übergeben möchten und kein V-Bind verwenden, übergeben Sie nur Zeichenfolgen.

2. Wenn Sie alle Eigenschaften eines Objekts als Requisiten übergeben möchten, können Sie v-bind ohne Parameter verwenden (d. h. verwenden Sie v-bind anstelle von v -bind:prop-name). Zum Beispiel ein bekanntes Todo-Objekt:

1.2 Objekt:

Wenn die Requisite überprüft werden muss, ist das Schreiben des Objekts erforderlich.

Wenn Ihre Komponente anderen zur Verfügung gestellt werden muss, wird im Allgemeinen empfohlen, eine Datenüberprüfung durchzuführen. Beispielsweise müssen bestimmte Daten vom numerischen Typ sein. Wenn eine Zeichenfolge übergeben wird, wird eine Warnung angezeigt auf der Konsole.

 <p id="app6">
   <input type="text" v-model="number">
   <my-component6 :my-text="number"></my-component6>
  </p>
Vue.component('my-component6',{
 props: {
  'myText':{
   type: Number, //必须是数字类型的
   required: true, //必须传值
   default: 1 //如果未定义，默认值就是1
  }
 },
 template: '<p>{{myText}}</p>'
});
var app6 = new Vue({
 el: '#app6',
 data: {
  number: 1
 }
});

Der überprüfte Typ kann sein:

• String

• Zahl

• Boolean
• Objekt
• Array
• Funktion

type kann auch ein benutzerdefinierter Konstruktor sein, der mithilfe von „instanceof“ erkannt wird.

Wenn die Requisitenüberprüfung fehlschlägt, wird in der Entwicklungsversion eine Warnung in der Konsole ausgegeben.

2. Einseitiger DatenflussEine der größeren Änderungen zwischen Vue 2.x und Vue l.x ist, dass Vue2.x Durch Requisiten übergeben Die Daten sind unidirektional, dh wenn sich die Daten der übergeordneten Komponente ändern, werden sie an die untergeordnete Komponente übergeben, jedoch nicht umgekehrt.

Im Geschäftsleben stoßen wir häufig auf zwei Situationen, in denen prop geändert werden muss.

2.1 Eine besteht darin, dass die übergeordnete Komponente den Anfangswert übergibt und die untergeordnete Komponente ihn als Anfangswert speichert speichert es in seinem eigenen Bereich. Es kann innerhalb des Gültigkeitsbereichs nach Belieben verwendet und geändert werden. (Nachdem Prop als Anfangswert übergeben wurde, möchte die untergeordnete Komponente es als lokale Daten verwenden;)

In diesem Fall können Sie andere Daten in den Komponentendaten deklarieren und auf das Prop der übergeordneten Komponente verweisen Der Beispielcode lautet wie folgt: Die Datenanzahl wird in der Komponente

rrree

deklariert. Sie erhält den initCount von der übergeordneten Komponente. Danach hat sie nichts mehr damit zu tun. Es verwaltet nur die Anzahl, sodass Sie den direkten Betrieb von initCount vermeiden können.

2.2　prop wird als ursprünglicher Wert übergeben, der transformiert werden muss. (Prop wird als Rohdaten übergeben und von der Unterkomponente in andere Datenausgaben verarbeitet.)

In diesem Fall reichen berechnete Eigenschaften aus. Der Beispielcode lautet wie folgt:

  <p id="app8">
   <my-component8 :width="100"></my-component8>
  </p>
Vue.component('my-component8',{
 props: ['width'],
 template: '<p :style="style">组件内容</p>',
 computed: {
  style: function(){
   return {
    width: this.width+'px'
   }
  }
 }
});
var app8 = new Vue({
 el: '#app8'
});

注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎么实现微信小程序登录鉴权

使用webpack插件html-webpack-plugin实例详解

Das obige ist der detaillierte Inhalt vonSo bedienen Sie Vue-Komponenten und verwenden Requisiten zum Übergeben von Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!