Wie VueJS-Komponenten durch Requisiten interagieren und überprüfen-js-Tutorial-php.cn

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

不言

Freigeben： 2018-06-30 17:32:02

Original

1677 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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!