Как вызвать функцию на дочернем компоненте на родительских событиях

контекст

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

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

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

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

Если вы хотите перезагрузить компонент с новым фильтром, при нажатии кнопки отфильтруйте дочерний компонент

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

и использовать фильтр, чтобы вызвать функцию