Katakanlah saya memiliki instance Vue utama yang memiliki komponen anak. Apakah ada cara memanggil metode milik salah satu komponen ini dari luar instance Vue sepenuhnya?
Berikut ini sebuah contoh:
var vm = new Vue({
el: '#app',
components: {
'my-component': {
template: '#my-template',
data: function() {
return {
count: 1,
};
},
methods: {
increaseCount: function() {
this.count++;
}
}
},
}
});
$('#external-button').click(function()
{
vm['my-component'].increaseCount(); // This doesn't work
});
<script src="http://vuejs.org/js/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app">
<my-component></my-component>
<br>
<button id="external-button">External Button</button>
</div>
<template id="my-template">
<div style="border: 1px solid; padding: 5px;">
<p>A counter: {{ count }}</p>
<button @click="increaseCount">Internal Button</button>
</div>
</template>
Jadi ketika saya mengklik tombol internal, increaseCount()
metode ini terikat ke event klik sehingga dipanggil. Tidak ada cara untuk mengikat acara ke tombol eksternal, yang acara kliknya saya dengarkan dengan jQuery, jadi saya perlu cara lain untuk menelepon increaseCount
.
EDIT
Tampaknya ini berfungsi:
vm.$children[0].increaseCount();
Namun, ini bukan solusi yang baik karena saya mereferensikan komponen dengan indeksnya di array anak-anak, dan dengan banyak komponen ini tidak mungkin tetap konstan dan kode kurang dapat dibaca.