Jak wywołać funkcję na komponencie potomnym na zdarzeniach nadrzędnych

Kontekst

W Vue 2.0 dokumentacja i inne jasno wskazują, że komunikacja od rodzica do dziecka odbywa się za pośrednictwem rekwizytów.

Pytanie

W jaki sposób rodzic może powiedzieć swojemu dziecku, że zdarzenie miało miejsce za pomocą rekwizytów?

Czy powinienem po prostu obejrzeć rekwizyt zwany wydarzeniem? To nie wydaje się właściwe, podobnie jak alternatywy ( $emit/ $onjest dla dziecka do rodzica, a model piasty jest dla odległych elementów).

Przykład

Mam kontener nadrzędny i musi on powiedzieć swojemu kontenerowi podrzędnemu, że można wykonywać określone czynności w interfejsie API. Muszę mieć możliwość wyzwalania funkcji.

Podaj składnikowi podrzędnemu a refi użyj go, $refsaby bezpośrednio wywołać metodę w składniku podrzędnym.

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

Aby uzyskać więcej informacji, zobacz dokumentację Vue dotyczącą ref .

To, co opisujesz, to zmiana stanu rodzica. Przekazujesz to dziecku przez rekwizyt. Jak zasugerowałeś, zrobiłbyś watchten rekwizyt. Kiedy dziecko podejmuje działanie, powiadamia o tym rodzica za pomocą emit, a rodzic może wtedy ponownie zmienić stan.

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>

Jeśli naprawdę chcesz przekazać zdarzenia dziecku, możesz to zrobić, tworząc autobus (który jest tylko instancją Vue) i przekazując go dziecku jako rekwizyt .

Możesz użyć $emiti $on. Używając kodu @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);
    }
  }
})

Uruchomiony przykład: https://jsfiddle.net/rjurado/m2spy60r/1/

Jeśli masz czas, użyj sklepu Vuex do bezpośredniego oglądania zmiennych (czyli stanu) lub wyzwalania (czyli wysyłania) akcji.

Nie podobało mi się podejście z magistralą zdarzeń używające $onpowiązań w dziecku podczas create. Czemu? Kolejne createwywołania (których używam vue-router) wiążą program obsługi wiadomości więcej niż raz - prowadząc do wielu odpowiedzi na wiadomość.

Nieco lepiej sprawdziło się ortodoksyjne rozwiązanie polegające na przekazywaniu rekwizytów z rodzica na dziecko i umieszczaniu w nim strażnika mienia . Jedynym problemem jest to, że dziecko może działać tylko przy zmianie wartości. Wielokrotne przekazywanie tej samej wiadomości wymaga pewnego rodzaju księgowości, aby wymusić przejście, aby dziecko mogło odebrać zmianę.

Odkryłem, że jeśli zawiniemy wiadomość w tablicę, zawsze wyzwoli to obserwator dziecka - nawet jeśli wartość pozostanie taka sama.

Rodzic:

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

Dziecko:

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

HTML:

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

Prostym sposobem na wywołanie metod na komponentach potomnych jest wyemitowanie procedury obsługi od dziecka, a następnie wywołanie jej z rodzica.

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>

Rodzic śledzi funkcje obsługi dziecka i wywołania, gdy jest to konieczne.

Poniższy przykład nie wymaga wyjaśnień. gdzie odwołania i zdarzenia mogą być używane do wywoływania funkcji od i do rodzica i dziecka.

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

Myślę, że powinniśmy wziąć pod uwagę konieczność stosowania przez rodzica metod dziecka. W rzeczywistości rodzice nie muszą zwracać uwagi na metodę dziecka, ale mogą traktować element potomny jako FSA (skończoną maszynę stanową). do kontrolowania stanu składnika potomnego, więc wystarczy obserwować zmianę stanu lub po prostu użyć funkcji obliczeniowej

możesz użyć klucza, aby przeładować komponent potomny za pomocą klucza

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

Jeśli chcesz przeładować komponent z nowym filtrem, kliknij przycisk, przefiltruj komponent potomny

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

i użyj filtru, aby wywołać funkcję