Comment appeler une fonction sur un composant enfant sur des événements parents

Le contexte

Dans Vue 2.0, la documentation et d' autres indiquent clairement que la communication du parent à l'enfant se fait via des accessoires.

Question

Comment un parent informe-t-il son enfant qu'un événement s'est produit via des accessoires?

Dois-je simplement regarder un accessoire appelé événement? Cela ne semble pas juste, pas plus que les alternatives ( $emit/ $onest pour l'enfant à parent, et un modèle de hub est pour les éléments distants).

Exemple

J'ai un conteneur parent et il doit indiquer à son conteneur enfant qu'il est normal d'engager certaines actions sur une API. J'ai besoin de pouvoir déclencher des fonctions.

Donnez au composant enfant a refet utilisez $refspour appeler une méthode directement sur le composant enfant.

html:

<div id="app">
  <child-component ref="childComponent"></child-component>
  <button @click="click">Click</button>  
</div>

javascript:

var ChildComponent = {
  template: '<div>{{value}}</div>',
  data: function () {
    return {
      value: 0
    };
  },
  methods: {
    setValue: function(value) {
        this.value = value;
    }
  }
}

new Vue({
  el: '#app',
  components: {
    'child-component': ChildComponent
  },
  methods: {
    click: function() {
        this.$refs.childComponent.setValue(2.0);
    }
  }
})

Pour plus d'informations, consultez la documentation Vue sur les refs .

Ce que vous décrivez est un changement d'état chez le parent. Vous transmettez cela à l'enfant via un accessoire. Comme vous l'avez suggéré, vous auriez watchcet accessoire. Lorsque l'enfant prend des mesures, il en informe le parent via un emit, et le parent peut alors modifier à nouveau l'état.

var Child = {
  template: '<div>{{counter}}</div>',
  props: ['canI'],
  data: function () {
    return {
      counter: 0
    };
  },
  watch: {
    canI: function () {
      if (this.canI) {
        ++this.counter;
        this.$emit('increment');
      }
    }
  }
}
new Vue({
  el: '#app',
  components: {
    'my-component': Child
  },
  data: {
    childState: false
  },
  methods: {
    permitChild: function () {
      this.childState = true;
    },
    lockChild: function () {
      this.childState = false;
    }
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
<div id="app">
<my-component :can-I="childState" v-on:increment="lockChild"></my-component>
<button @click="permitChild">Go</button>
</div>

Si vous voulez vraiment passer des événements à un enfant, vous pouvez le faire en créant un bus (qui n'est qu'une instance de Vue) et en le passant à l'enfant en tant qu'accessoire .

Vous pouvez utiliser $emitet $on. Utilisation du code @RoyJ:

html:

<div id="app">
  <my-component></my-component>
  <button @click="click">Click</button>  
</div>

javascript:

var Child = {
  template: '<div>{{value}}</div>',
  data: function () {
    return {
      value: 0
    };
  },
  methods: {
    setValue: function(value) {
        this.value = value;
    }
  },
  created: function() {
    this.$parent.$on('update', this.setValue);
  }
}

new Vue({
  el: '#app',
  components: {
    'my-component': Child
  },
  methods: {
    click: function() {
        this.$emit('update', 7);
    }
  }
})

Exemple en cours d'exécution: https://jsfiddle.net/rjurado/m2spy60r/1/

Si vous avez le temps, utilisez Vuex store pour regarder les variables (aka state) ou déclencher (aka dispatch) une action directement.

N'a pas aimé l' approche du bus d'événements utilisant des $onliaisons chez l'enfant pendant create. Pourquoi? createAppels ultérieurs (j'utilisevue-router ) lient le gestionnaire de messages plus d'une fois, ce qui entraîne plusieurs réponses par message.

La solution orthodoxe consistant à faire passer des accessoires de parent à enfant et à mettre un surveillant de propriété chez l'enfant fonctionnait un peu mieux. Seul hic étant que l'enfant ne peut agir que sur une transition de valeur. Passer le même message plusieurs fois nécessite une sorte de comptabilité pour forcer une transition afin que l'enfant puisse récupérer la monnaie.

J'ai constaté que si j'emballe le message dans un tableau, cela déclenchera toujours l'observateur enfant - même si la valeur reste la même.

Parent:

{
   data: function() {
      msgChild: null,
   },
   methods: {
      mMessageDoIt: function() {
         this.msgChild = ['doIt'];
      }
   }   
   ...
}

Enfant:

{
   props: ['msgChild'],
   watch: {
      'msgChild': function(arMsg) {
         console.log(arMsg[0]);
      }
   }
}

HTML:

<parent>
   <child v-bind="{ 'msgChild': msgChild }"></child>
</parent>

Un moyen découplé simple d'appeler des méthodes sur des composants enfants consiste à émettre un gestionnaire depuis l'enfant, puis à l'appeler depuis le parent.

var Child = {
  template: '<div>{{value}}</div>',
  data: function () {
    return {
      value: 0
    };
  },
  methods: {
  	setValue(value) {
    	this.value = value;
    }
  },
  created() {
    this.$emit('handler', this.setValue);
  }
}

new Vue({
  el: '#app',
  components: {
    'my-component': Child
  },
  methods: {
  	setValueHandler(fn) {
    	this.setter = fn
    },
    click() {
    	this.setter(70)
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<div id="app">
  <my-component @handler="setValueHandler"></my-component>
  <button @click="click">Click</button>  
</div>

Le parent effectue le suivi des fonctions du gestionnaire enfant et des appels chaque fois que nécessaire.

L'exemple ci-dessous est auto-explicatif. où les références et les événements peuvent être utilisés pour appeler la fonction depuis et vers le parent et l'enfant.

// PARENT
<template>
  <parent>
    <child
      @onChange="childCallBack"
      ref="childRef"
      :data="moduleData"
    />
    <button @click="callChild">Call Method in child</button>
  </parent>
</template>

<script>
export default {
  methods: {
    callChild() {
      this.$refs.childRef.childMethod('Hi from parent');
    },
    childCallBack(message) {
      console.log('message from child', message);
    }
  }
};
</script>

// CHILD
<template>
  <child>
    <button @click="callParent">Call Parent</button>
  </child>
</template>

<script>
export default {
  methods: {
    callParent() {
      this.$emit('onChange', 'hi from child');
    },
    childMethod(message) {
      console.log('message from parent', message);
    }
  }
}
</script>

Je pense que nous devrions tenir compte de la nécessité pour le parent d'utiliser les méthodes de l'enfant.En fait, les parents n'ont pas à se soucier de la méthode de l'enfant, mais peuvent traiter le composant enfant comme un FSA (machine à états finis). pour contrôler l'état du composant enfant.Ainsi, la solution pour observer le changement d'état ou simplement utiliser la fonction de calcul suffit

vous pouvez utiliser la clé pour recharger le composant enfant en utilisant la clé

<component :is="child1" :filter="filter" :key="componentKey"></component>

Si vous souhaitez recharger le composant avec un nouveau filtre, si vous cliquez sur le bouton, filtrez le composant enfant

reloadData() {            
   this.filter = ['filter1','filter2']
   this.componentKey += 1;  
},

et utilisez le filtre pour déclencher la fonction