Üst olaylarda alt bileşende işlev çağırma

bağlam

Vue 2.0'da belgeler ve diğerleri , ebeveynlerden çocuğa olan iletişimin sahne aracılığıyla gerçekleştiğini açıkça göstermektedir.

Soru

Bir ebeveyn, çocuğuna sahne aracılığıyla bir olayın gerçekleştiğini nasıl söyler?

Olay adında bir pervane izlemeli miyim? Bu doğru hissetmez ve alternatifler de yapmaz ( $emit/ $onçocuk için ebeveyn içindir ve bir hub modeli uzak öğeler içindir).

Misal

Bir üst kapsayıcı var ve onun alt kapsayıcı bir API üzerinde bazı eylemlerde bulunmanın sorun olmadığını söylemek gerekir. Fonksiyonları tetikleyebilmem gerekiyor.

Çocuk bileşen a ver refve kullanımı $refsdoğrudan çocuk bileşeni üzerinde bir yöntemi çağırmak için.

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

Daha fazla bilgi için bkz . Ref ile ilgili Vue belgeleri .

Tanımladığınız şey, üst öğedeki durum değişikliğidir. Bunu bir pervane ile çocuğa geçirirsiniz. Önerdiğiniz gibi, watchbu pervane olur. Çocuk harekete geçtiğinde, ebeveyne bir aracılığıyla bildirim gönderir emitve ebeveyn daha sonra durumu tekrar değiştirebilir.

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>

Olayları bir çocuğa gerçekten iletmek istiyorsanız, bunu bir otobüs (yalnızca bir Vue örneği) oluşturarak ve onu bir pervane olarak çocuğa ileterek yapabilirsiniz .

Sen kullanabilirsiniz $emitve $on. @RoyJ kodunu kullanarak:

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

Çalışan örnek: https://jsfiddle.net/rjurado/m2spy60r/1/

Vaktiniz varsa, değişkenleri izlemek için Vuex mağazasını kullanın (durum olarak da bilinir) veya bir eylemi doğrudan tetiklemek (aka olarak göndermek).

Olay otobüsü$on sırasında çocukta ciltleme kullanarak yaklaşım beğenmedi create. Neden? Sonraki createçağrılar (kullanıyorum vue-router), ileti işleyicisini birden çok kez bağlar ve her ileti için birden çok yanıta neden olur.

Aksesuarı ebeveynlerden çocuğa geçirmenin ve çocuğa bir mülk izleyicisini koymanın ortodoks çözümü biraz daha iyi çalıştı . Tek sorun, çocuğun sadece bir değer geçişi üzerinde hareket edebilmesidir. Aynı mesajı birden çok kez iletmek, geçişi zorlamak için bir tür defter tutma gerektirir, böylece çocuk değişikliği alabilir.

Mesaj bir diziye sarılırsa, değer aynı kalsa bile her zaman çocuk izleyiciyi tetikleyeceğini buldum.

Veli:

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

Çocuk:

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

HTML:

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

Alt bileşenlerdeki yöntemleri çağırmanın basit bir ayrıştırılmış yolu, çocuktan bir işleyici yaymak ve daha sonra üst öğeden çağırmaktır.

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>

Ebeveyn, çocuk işleyici işlevlerini ve gerektiğinde çağrıları takip eder.

Aşağıdaki örnek kendi kendini açıklamaktadır. burada refs ve olaylar, ebeveynden ve alt öğeden işleve çağrı yapmak için kullanılabilir.

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

Bence, ebeveynin çocuğun yöntemlerini kullanmasının gerekliliği hakkında bir düşünceye sahip olmalıyız. Durum değişikliğini izlemek veya sadece hesaplama işlevini kullanmak için çözüm yeterlidir

tuşunu kullanarak alt bileşeni yeniden yüklemek için tuşu kullanabilirsiniz

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

Bileşeni yeni filtreyle yeniden yüklemek istiyorsanız, düğmeyi tıklattığınızda alt bileşene filtre uygulayın

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

ve işlevi tetiklemek için filtreyi kullanın