Maison > Article > interface Web > Comment les composants VueJS interagissent et vérifient via les accessoires

Comment les composants VueJS interagissent et vérifient via les accessoires

不言original: 2018-06-30 17:32:021585parcourir

Cet article présente principalement l'interaction et la vérification entre les composants VueJS via des accessoires. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

props est une propriété personnalisée utilisée par le composant parent pour transmettre des données. Les données du composant parent doivent être transmises au composant enfant via des accessoires, et le composant enfant doit déclarer explicitement "prop" avec l'option props.

Le composant parent transmet les données au composant enfant via des accessoires

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>

L'effet est le suivant :

Accessoires dynamiques pour construire un transfert de données

Semblable à l'utilisation de v-bind pour lier des fonctionnalités HTML à une expression, vous pouvez utiliser également v-bind lie dynamiquement la valeur des accessoires aux données du composant parent. Chaque fois que les données du composant parent changent, la modification sera également transmise au composant enfant :

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>

L'effet est la suivante :

La directive v-bind transmet la tâche à chaque composant répété

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>

L'effet est le suivant :

Remarque : les accessoires sont une liaison unidirectionnelle : lorsque les propriétés du composant parent changent, elles le seront être transmis au composant enfant, mais pas l'inverse.

Le composant spécifie les exigences de validation pour les props

Lorsque props est un objet au lieu d'un tableau de chaînes, il contient des exigences de validation :

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

type peut être le constructeur natif suivant :

String
Nombre
Booléen
Fonction
Objet
Array

type peut également être un constructeur personnalisé, utilisant une instance de détection.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Introduction à l'encapsulation des composants d'entrée dans Vue

Introduction aux pratiques de communication des composants Vue

Introduction au packaging du composant de commutation multi-onglets Vue2.0

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php html 封装字符串对象 input

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction à l'encapsulation des composants d'entrée dans VueArticle suivant：Introduction à l'encapsulation des composants d'entrée dans Vue

Articles Liés

Voir plus