Vuejs 2: envoyer un événement à partir d'un composant à un parent
J'ai ce code:
html
<div id="app">
{{text}}
<my-component></my-component>
</div>
js
Vue.component('my-component', {
template: '<button @click="click">Click me</button>',
methods: {
click() {
this.$emit('send', 'bye')
}
}
})
new Vue({
el: "#app",
data: {
text: "hello"
},
created() {
this.$on('send', (text) => {
this.text = text;
})
}
})
de travail exemple: https://jsfiddle.net/rjurado/y4yf6nve/
pourquoi événement send
ne fonctionne pas?
Vous devez vous connecter pour publier un commentaire.
this.$emit
seulement se référer à la Vue des Composants. Vous avez besoin d'utiliserroot
propriété d'instance de communiquer avec des composants à partir de la racine de l'instance. Donc, fondamentalement, ajouter de la racine aux événements:De travail exemple: jsFiddle
Vue.js l'événement central de bus
Encore meilleure approche est d'avoir événement central bus: docs
De travail exemple: jsFiddle
Composants parents peuvent écouter directement les événements émis par enfant composants à l'aide de
v-on
.html
js
De travail exemple: https://jsfiddle.net/y4yf6nve/2/
Pour de futures références, des événements personnalisés nom ne peut pas être en camelcase.
Utilisation
this.$emit('send_event', 'bye')
au lieu dethis.$emit('sendEvent', 'bye')
https://github.com/vuejs/vue/issues/4044