Comment configurer la communication parent-enfant dans vuejs

Comment configurer la communication parent-enfant dans vuejs : 1. Le composant parent utilise des accessoires pour transmettre des données au composant enfant ; 2. Le composant enfant envoie des messages au composant parent via "$emit" ; sync" sucre syntaxique ; 4. Utilisez " $attrs" et "$listeners" ; 5. Utilisez private et inject.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

vue a les méthodes de communication suivantes entre les composants du parent et de l'enfant:

• props

• $ Emit - L'encapsulation des composants est plus couramment utilisée

• .Sync - Sucre syntaxique

• $ attrs et $listeners -- couramment utilisés pour l'encapsulation de composants

• privide et inject -- composants d'ordre supérieur

Ce qui suit présentera respectivement

1 et props

, qui sont souvent utilisés dans le développement quotidien , pour faire simple, nous pouvons transmettre des données aux sous-composants via des accessoires, tout comme une conduite d'eau. Les données du composant parent circulent de haut en bas vers le sous-composant et ne peuvent pas revenir en arrière. Il s'agit également du flux de données unique de l'introduction à la conception de Vue.

<div id="app">
  <child :content="message"></child>
</div>
// Js
let Child = Vue.extend({
  template: &#39;<h2>{{ content }}</h2>&#39;,
  props: {
    content: {
      type: String,
      default: () => { return &#39;from child&#39; }
    }
  }
})
new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;from parent&#39;
  },
  components: {
    Child
  }
})

2. $emit

L'introduction officielle consiste à déclencher des événements sur l'instance actuelle, et des paramètres supplémentaires seront transmis au rappel de l'auditeur.

<div id="app">
  <my-button @greet="sayHi"></my-button>
</div>
let MyButton = Vue.extend({
  template: &#39;<button @click="triggerClick">click</button>&#39;,
  data () {
    return {
      greeting: &#39;vue.js!&#39;
    }
  },
  methods: {
    triggerClick () {
      this.$emit(&#39;greet&#39;, this.greeting)
    }
  }
})
new Vue({
  el: &#39;#app&#39;,
  components: {
    MyButton
  },
  methods: {
    sayHi (val) {
      alert(&#39;Hi, &#39; + val) // &#39;Hi, vue.js!&#39;
    }
  }
})

3. Le modificateur .sync

existait en tant que fonction de liaison bidirectionnelle dans vue1.x, c'est-à-dire que le composant enfant peut modifier la valeur dans le composant parent. Parce qu'il violait le concept de conception du flux de données unidirectionnel, il a été supprimé dans vue2.x, mais ce modificateur .sync a été réintroduit dans vue 2.3.0+ et supérieur. Mais il n’existe que comme sucre syntaxique au moment de la compilation. Il est étendu en tant qu'écouteur v-on qui met automatiquement à jour les propriétés du composant parent.

Dans certains cas, nous pouvons être amenés à effectuer une « liaison bidirectionnelle » sur un accessoire. Malheureusement, une véritable liaison bidirectionnelle crée des problèmes de maintenance car les composants enfants peuvent modifier leurs composants parents sans source évidente de changement dans les composants parents ou enfants.

Le sucre syntaxique est écrit sous la forme suivante

<text-document
    v-bind:title="doc.title"
    v-on:update:title="doc.title = $event">
</text-document>

Nous pouvons donc utiliser le sucre de syntaxe .sync pour être abrégé sous la forme suivante

<text-document v-bind:title.sync="doc.title"></text-document>

Alors, comment obtenir une liaison bidirectionnelle, par exemple en modifiant la valeur dans le texte boîte du composant enfant tout en modifiant la valeur dans la valeur du composant parent, le code est le suivant

<div id="app">
  <login :name.sync="userName"></login> {{ userName }}
</div>

let Login = Vue.extend({
  template: `
    <div class="input-group">
      <label>姓名:</label>
      <input v-model="text">
    </div>
  `,
  props: [&#39;name&#39;],
  data () {
    return {
      text: &#39;&#39;
    }
  },
  watch: {
    text (newVal) {
      this.$emit(&#39;update:name&#39;, newVal)
    }
  }
})

new Vue({
  el: &#39;#app&#39;,
  data: {
    userName: &#39;&#39;
  },
  components: {
    Login
  }
})

Il n'y a qu'une seule phrase dans le code :

this.$emit('update:name', newVal)

La syntaxe officielle est : update:myPropName où myPropName représente la valeur du prop à être mis à jour. Bien sûr, si vous n'utilisez pas le sucre de syntaxe .sync et utilisez .$emit ci-dessus, vous pouvez obtenir le même effet

4 $attrs et $listeners

Le site officiel explique $attrs comme suit :

. Inclut les éléments qui ne font pas partie de la portée parent. Liaisons de propriétés (à l'exception de la classe et du style) qui sont reconnues (et obtenues) en tant qu'accessoires. Lorsqu'un composant ne déclare aucun accessoire, toutes les liaisons de portée parent (sauf la classe et le style) seront incluses ici, et les composants internes peuvent être transmis via v-bind="$attrs" - lors de la création de composants de haut niveau. Très utile.

Le site officiel explique $listeners comme suit :

　Contient les écouteurs d'événements v-on dans la portée parent (sans modificateur .native). Il peut être transmis aux composants internes via v-on="$listeners" - très utile lors de la création de composants de niveau supérieur.

Les attributs $attrs et $listeners sont comme deux boîtes de stockage, l'une est responsable du stockage des attributs et l'autre est responsable du stockage des événements. Ils stockent tous deux les données sous forme d'objets

<div id="app">
  <child
    :foo="foo"
    :bar="bar"
    @one.native="triggerOne"
    @two="triggerTwo">
  </child>
</div>

let Child = Vue.extend({
  template: &#39;<h2>{{ foo }}</h2>&#39;,
  props: [&#39;foo&#39;],
  created () {
    console.log(this.$attrs, this.$listeners)
    // -> {bar: "parent bar"}
    // -> {two: fn}
    // 这里我们访问父组件中的 `triggerTwo` 方法
    this.$listeners.two()
    // -> &#39;two&#39;
  }
})

new Vue({
  el: &#39;#app&#39;,
  data: {
    foo: &#39;parent foo&#39;,
    bar: &#39;parent bar&#39;
  },
  components: {
    Child
  },
  methods: {
    triggerOne () {
      alert(&#39;one&#39;)
    },
    triggerTwo () {
      alert(&#39;two&#39;)
    }
  }
})

Comme vous pouvez le voir, nous pouvons utiliser. $attrs et $listeners pour stocker les données La transmission, l'appel et le traitement là où cela est nécessaire sont toujours très pratiques. Bien sûr, nous pouvons également le transmettre niveau par niveau via v-on="$listeners", et la descendance sera infinie !

5, private et inject

Jetons un coup d'œil à la description officielle de provide / inject :

　 Provide et inject fournissent principalement des cas d'utilisation pour les plug-ins/bibliothèques de composants haut de gamme. Il n'est pas recommandé de l'utiliser directement dans le code de l'application. Et cette paire d'options doit être utilisée ensemble pour permettre à un composant ancêtre d'injecter une dépendance dans tous ses descendants, quelle que soit la profondeur de la hiérarchie des composants, et cela prendra toujours effet à partir du moment où les relations en amont et en aval sont établies.

<div id="app">

  <son></son>

</div>

let Son = Vue.extend({
  template: &#39;<h2>son</h2>&#39;,
  inject: {
    house: {
      default: &#39;没房&#39;
    },
    car: {
      default: &#39;没车&#39;
    },
    money: {
      // 长大工作了虽然有点钱
      // 仅供生活费，需要向父母要
      default: &#39;￥4500&#39;
    }
  },
  created () {
    console.log(this.house, this.car, this.money)
    // -> &#39;房子&#39;, &#39;车子&#39;, &#39;￥10000&#39;
  }
})

new Vue({
  el: &#39;#app&#39;,
  provide: {
    house: &#39;房子&#39;,
    car: &#39;车子&#39;,
    money: &#39;￥10000&#39;
  },
  components: {
    Son
  }
})

Pour plus d'exemples, vous pouvez vous référer au code source d'element-ui, dont un grand nombre utilise cette méthode

Recommandations associées : "tutoriel vue.js"

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!