Como chamar a função no componente filho nos eventos pai

Contexto

No Vue 2.0, a documentação e outros indicam claramente que a comunicação de pai para filho ocorre por meio de adereços.

Questão

Como um pai ou mãe diz a seu filho que um evento aconteceu por meio de acessórios?

Devo apenas assistir a um objeto chamado evento? Isso não parece certo, nem alternativas ( $emit/ $oné da criança para a mãe, e um modelo de hub é para elementos distantes).

Exemplo

Eu tenho um contêiner pai e ele precisa informar ao contêiner filho que não há problema em envolver determinadas ações em uma API. Eu preciso ser capaz de disparar funções.

Dê ao componente filho ae refuse-o $refspara chamar um método diretamente no componente filho.

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

Para mais informações, consulte a documentação do Vue em refs .

O que você está descrevendo é uma mudança de estado no pai. Você passa isso para a criança através de um suporte. Como você sugeriu, você faria watchisso. Quando a criança toma uma ação, ela notifica o pai por meio de um emite o pai pode alterar o estado novamente.

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>

Se você realmente deseja transmitir eventos para uma criança, pode fazer isso criando um barramento (que é apenas uma instância do Vue) e passando-o para a criança como suporte .

Você pode usar $emite $on. Usando o código @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);
    }
  }
})

Exemplo de execução: https://jsfiddle.net/rjurado/m2spy60r/1/

Se você tiver tempo, use o armazenamento Vuex para assistir variáveis ​​(também conhecido como estado) ou acionar (conhecido como despachar) uma ação diretamente.

Não gostou da abordagem de barramento de eventos usando $onligações no filho durante create. Por quê? As createchamadas subseqüentes (estou usando vue-router) vinculam o manipulador de mensagens mais de uma vez - levando a várias respostas por mensagem.

A solução ortodoxa de passar adereços de pai para filho e colocar um observador de propriedades na criança funcionou um pouco melhor. O único problema é que a criança só pode agir em uma transição de valor. Passar a mesma mensagem várias vezes precisa de algum tipo de contabilidade para forçar uma transição, para que a criança possa pegar a mudança.

Descobri que, se envolver a mensagem em uma matriz, ela sempre acionará o observador de crianças - mesmo que o valor permaneça o mesmo.

Pai:

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

Criança:

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

HTML:

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

Uma maneira simples e dissociada de chamar métodos em componentes filhos é emitindo um manipulador do filho e depois invocando-o do pai.

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>

O pai controla as funções e chamadas do manipulador filho sempre que necessário.

O exemplo abaixo é auto-explicativo. onde referências e eventos podem ser usados ​​para chamar a função de e para pai e filho.

// 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>

Penso que devemos ter uma consideração sobre a necessidade dos pais de usar os métodos da criança. De fato, os pais não precisam se preocupar com o método da criança, mas podem tratar o componente filho como uma FSA (máquina de estados finitos). para controlar o estado do componente filho. Portanto, a solução para observar a mudança de status ou apenas usar a função de computação é suficiente

você pode usar a tecla para recarregar o componente filho usando a tecla

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

Se você deseja recarregar o componente com o novo filtro, se clicar no botão filtrar o componente filho

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

e use o filtro para ativar a função