Heim > Artikel > Web-Frontend > Wie VueJS-Komponenten durch Requisiten interagieren und überprüfen

Wie VueJS-Komponenten durch Requisiten interagieren und überprüfen

不言Original: 2018-06-30 17:32:021586Durchsuche

Dieser Artikel stellt hauptsächlich die Interaktion und Überprüfung zwischen VueJS-Komponenten durch Requisiten vor. Interessierte Freunde können darauf verweisen.

props ist eine benutzerdefinierte Eigenschaft, die von der übergeordneten Komponente zum Übergeben von Daten verwendet wird. Die Daten der übergeordneten Komponente müssen über Requisiten an die untergeordnete Komponente übergeben werden, und die untergeordnete Komponente muss „prop“ explizit mit der Option „props“ deklarieren.

Die übergeordnete Komponente übergibt Daten über Requisiten an die untergeordnete Komponente

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<p id="app">
  <child message="hello world!">props传递给子组件</child>
</p>

<script>
// 
Vue.component(&#39;child&#39;, {
 // 声明 props
 props: [&#39;message&#39;],
 // 同样也可以在 vm 实例中像 “this.message” 这样使用
 template: &#39;<h1>{{ message }}</h1>&#39;
})
// 创建根实例
new Vue({
 el: &#39;#app&#39;
})
</script>
</body>
</html>

Der Effekt ist wie folgt:

Dynamische Requisiten zum Aufbau der Datenübertragung

Ähnlich wie mit v-bind HTML-Funktionen an einen Ausdruck binden, können Sie auch Folgendes verwenden v-bind bindet den Wert von props dynamisch an die Daten der übergeordneten Komponente. Immer wenn sich die Daten der übergeordneten Komponente ändern, wird die Änderung auch an die untergeordnete Komponente übertragen:

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<p id="app">
  <p>
   <input v-model="parentMsg">
   <br>
   <child v-bind:message="parentMsg"></child>
  </p>
</p>

<script>
// 注册
Vue.component(&#39;child&#39;, {
 // 声明 props
 props: [&#39;message&#39;],
 // 同样也可以在 vm 实例中像 “this.message” 这样使用
 template: &#39;<span>{{ message }}</span>&#39;
})
// 创建根实例
new Vue({
 el: &#39;#app&#39;,
 data: {
  parentMsg: &#39;父组件内容&#39;
 }
})
</script>
</body>
</html>

Der Effekt ist wie folgt in der Abbildung gezeigt:

Die v-bind-Direktive übergibt die Aufgabe an jede wiederholte Komponente

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<p id="app">
  <ol>
  <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
   </ol>
</p>

<script>
Vue.component(&#39;todo-item&#39;, {
 props: [&#39;todo&#39;],
 template: &#39;<li>{{ todo.text }}</li>&#39;
})
new Vue({
 el: &#39;#app&#39;,
 data: {
  sites: [
   { text: &#39;Runoob&#39; },
   { text: &#39;Google&#39; },
   { text: &#39;Taobao&#39; }
  ]
 }
})
</script>
</body>
</html>

Der Effekt ist wie folgt:

Hinweis: Requisiten sind einseitig bindend: Wenn sich die Eigenschaften der übergeordneten Komponente ändern, werden sie geändert an die untergeordnete Komponente übertragen, aber nicht umgekehrt.

Die Komponente legt Validierungsanforderungen für Requisiten fest

Wenn props ein Objekt und kein String-Array ist, enthält es Validierungsanforderungen:

Vue.component(&#39;example&#39;, {
 props: {
  // 基础类型检测 （`null` 意思是任何类型都可以）
  propA: Number,
  // 多种类型
  propB: [String, Number],
  // 必传且是字符串
  propC: {
   type: String,
   required: true
  },
  // 数字，有默认值
  propD: {
   type: Number,
   default: 100
  },
  // 数组／对象的默认值应当由一个工厂函数返回
  propE: {
   type: Object,
   default: function () {
    return { message: &#39;hello&#39; }
   }
  },
  // 自定义验证函数
  propF: {
   validator: function (value) {
    return value > 10
   }
  }
 }
})

Typ kann der folgende native Konstruktor sein:

String
Zahl
Boolean
Funktion
Objekt
Array

Typ kann auch ein benutzerdefinierter Konstruktor sein, der die Instanzerkennung verwendet.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Einführung in die Kapselung von Eingabekomponenten in Vue

Einführung in die Kommunikationspraktiken von Vue-Komponenten

Verpackungseinführung der Vue2.0 Multi-Tab-Switching-Komponente

Das obige ist der detaillierte Inhalt vonWie VueJS-Komponenten durch Requisiten interagieren und überprüfen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php html 封装字符串对象 input

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：Einführung in die Kapselung von Eingabekomponenten in VueNächster Artikel：Einführung in die Kapselung von Eingabekomponenten in Vue

In Verbindung stehende Artikel

Mehr sehen