Cara memanggil fungsi pada komponen anak pada acara induk

Konteks

Dalam Vue 2.0 dokumentasi dan lainnya dengan jelas menunjukkan bahwa komunikasi dari orang tua ke anak terjadi melalui alat peraga.

Pertanyaan

Bagaimana orang tua memberi tahu anaknya bahwa suatu peristiwa telah terjadi melalui alat peraga?

Haruskah saya menonton acara yang disebut prop? Itu tidak terasa benar, juga tidak ada alternatif ( $emit/ $onuntuk anak ke orang tua, dan model hub untuk elemen yang jauh).

Contoh

Saya memiliki wadah induk dan perlu memberi tahu wadah anaknya bahwa tidak apa-apa untuk melakukan tindakan tertentu pada API. Saya harus dapat memicu fungsi.

Berikan komponen anak refdan gunakan $refsuntuk memanggil metode pada komponen anak secara langsung.

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

Untuk info lebih lanjut, lihat dokumentasi Vue tentang referensi .

Apa yang Anda gambarkan adalah perubahan status pada orang tua. Anda memberikannya kepada anak melalui alat peraga. Seperti yang Anda sarankan, Anda akan watchmendukung itu. Ketika anak mengambil tindakan, ia memberi tahu orang tua melalui emit, dan orang tua kemudian dapat mengubah negara lagi.

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>

Jika Anda benar-benar ingin memberikan acara kepada seorang anak, Anda dapat melakukannya dengan membuat bus (yang hanya merupakan contoh Vue) dan memberikannya kepada anak sebagai penyangga .

Anda bisa menggunakan $emitdan $on. Menggunakan kode @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);
    }
  }
})

Contoh menjalankan: https://jsfiddle.net/rjurado/m2spy60r/1/

Jika Anda punya waktu, gunakan Vuex store untuk menonton variabel (alias status) atau memicu (alias mengirim) tindakan secara langsung.

Tidak suka pendekatan event-bus menggunakan $onbinding pada anak selama create. Mengapa? createPanggilan selanjutnya (Saya menggunakanvue-router ) mengikat pawang pesan lebih dari sekali - mengarah ke beberapa respons per pesan.

Solusi ortodoks dari menurunkan alat peraga dari orangtua ke anak dan menempatkan pengamat properti pada anak itu sedikit berhasil lebih baik. Satu-satunya masalah adalah bahwa anak hanya dapat bertindak pada transisi nilai. Melewati pesan yang sama beberapa kali membutuhkan semacam pembukuan untuk memaksakan transisi agar anak dapat mengambil perubahan.

Saya telah menemukan bahwa jika saya membungkus pesan dalam sebuah array, itu akan selalu memicu pengamat anak - bahkan jika nilainya tetap sama.

Induk:

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

Anak:

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

HTML:

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

Cara sederhana dipisahkan untuk memanggil metode pada komponen anak adalah dengan memancarkan handler dari anak dan kemudian memohonnya dari orang tua.

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>

Orang tua melacak fungsi penangan anak dan panggilan bila perlu.

Contoh di bawah ini cukup jelas. di mana referensi dan acara dapat digunakan untuk memanggil fungsi dari dan ke orangtua dan anak.

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

Saya pikir kita harus memiliki pertimbangan tentang perlunya orang tua untuk menggunakan metode anak. Bahkan, orang tua tidak perlu memperhatikan metode anak, tetapi dapat memperlakukan komponen anak sebagai FSA (mesin keadaan terbatas). Komponen orangtua untuk mengontrol keadaan komponen anak. Jadi solusi untuk menonton perubahan status atau hanya menggunakan fungsi komputasi sudah cukup

Anda dapat menggunakan kunci untuk memuat ulang komponen anak menggunakan kunci

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

Jika Anda ingin memuat ulang komponen dengan filter baru, jika klik tombol filter komponen anak

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

dan gunakan filter untuk memicu fungsi