Comment appeler la fonction d'un composant enfant sur les événements du parent ?

Question

Contexte

Dans Vue 2.0, la documentation et autres indiquent clairement que la communication entre le parent et l'enfant se fait par le biais d'accessoires.

Question

Comment un parent indique-t-il à son enfant qu'un événement s'est produit via des props ?

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

Exemple

J'ai un conteneur parent et il doit dire à son conteneur enfant qu'il peut effectuer certaines actions sur une API. Je dois être capable de déclencher des fonctions.

Answer 1

Donnez au composant enfant un ref et utiliser $refs pour appeler directement une méthode 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, voir Documentation Vue sur les refs .

Answer 2

Ce que vous décrivez est un changement d'état du parent. Vous le transmettez à l'enfant via un prop. Comme vous l'avez suggéré, vous devriez watch cet accessoire. Lorsque l'enfant entreprend une action, il en informe le parent par le biais d'un message de type emit et le parent peut alors changer à 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 transmettre des événements à un enfant, vous pouvez le faire en créer un bus (qui est juste une instance Vue) et le passer à l'enfant en tant que prop .

Answer 3

Vous pouvez utiliser $emit et $on . En utilisant le code de @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 concret : https://jsfiddle.net/rjurado/m2spy60r/1/

Answer 4

L'exemple ci-dessous s'explique de lui-même. où les références et les événements peuvent être utilisés pour appeler des fonctions 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>

Answer 5

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