Як викликати функцію дочірнього компонента на батьківських подіях

Контекст

У Vue 2.0 документація та інші чітко вказують, що спілкування від батька до дитини відбувається через реквізит.

Питання

Як батько повідомляє своїй дитині, що відбулася подія за допомогою реквізиту?

Потрібно просто спостерігати за подією, яку називають опорою? Це не вірно, ані альтернативи ( $emit/ $onпризначено для дитини-батька, а модель концентратора - для віддалених елементів).

Приклад

У мене є батьківський контейнер, і він повинен сказати своєму дочірньому контейнерові, що це добре, щоб здійснити певні дії в API. Мені потрібно вміти запускати функції.

Дайте дочірньому компоненту a refі використовуйте $refsдля виклику методу безпосередньо на дочірньому компоненті.

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

Докладніші відомості див. У документації Vue на відповідні документи .

Те, що ви описуєте, - це зміна стану батьків. Ви передаєте це дитині через опору. Як ви запропонували, ви б watchце підтримали. Коли дитина вживає заходів, вона сповіщає батьків за допомогою emit, і батько може потім змінити стан знову.

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>

Якщо ви справді хочете передати події дитині, ви можете зробити це, створивши шину (яка є лише екземпляром Vue) та передавши її дитині як опору .

Ви можете використовувати $emitі $on. Використовуючи код @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);
    }
  }
})

Приклад роботи: https://jsfiddle.net/rjurado/m2spy60r/1/

Якщо у вас є час, використовуйте магазин Vuex для перегляду змінних (ака-стан) або запускайте (ака-диспетчер) дії безпосередньо.

Не сподобався подієво-автобусний підхід використанням $onприв’язок у дитини протягом create. Чому? Подальші createдзвінки (я використовую vue-router) пов'язують обробник повідомлень не раз - це призводить до отримання декількох відповідей на повідомлення.

Православне рішення передавати реквізит від батька до дитини та помістити в нього майнового спостерігача, працювало трохи краще. Проблема лише в тому, що дитина може діяти лише на ціннісному переході. Передача одного і того ж повідомлення кілька разів потребує певної бухгалтерії, щоб примусити перехід, щоб дитина могла забрати зміни.

Я виявив, що якщо я загортаю повідомлення в масив, воно завжди запускатиме дитину-спостерігача - навіть якщо значення залишається таким же.

Батько:

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

Дитина:

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

HTML:

<parent>
   <child v-bind="{ 'msgChild': msgChild }"></child>
</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/vue@2.5.17/dist/vue.js"></script>

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

Батько відслідковує функції довірителя та дзвонить, коли це необхідно.

Наведений нижче приклад пояснює себе. де виклики та події можуть використовуватися для виклику функції від батьків та дитини.

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

Я думаю, що ми повинні мати роздуми про необхідність батьків використовувати методи дитини. Насправді, батькам не потрібно стосуватися методу дитини, але вони можуть ставитися до дочірнього компонента як до FSA (скінченного апарату). Батьковий компонент для контролю стану дочірнього компонента. Таким чином, достатньо рішення спостерігати за зміною статусу або просто використовувати функцію обчислення

ви можете використовувати ключ для перезавантаження дочірнього компонента за допомогою ключа

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

Якщо ви хочете перезавантажити компонент новим фільтром, якщо натиснути кнопку фільтрувати дочірній компонент

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

і використовуйте фільтр для запуску функції