web-dev-qa-db-fra.com

Vuejs 2: envoyer un événement du composant au 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;
    })
  }
})

exemple de travail: https://jsfiddle.net/rjurado/y4yf6nve/

pourquoi l'événement send ne fonctionne pas?

vuejs2
21
drinor

this.$emit ne fait référence qu'à Vue Composants. Vous devez utiliser la propriété d'instance root pour communiquer avec les composants à partir de l'instance racine. Donc, ajoutez essentiellement la racine aux événements:

this.$root.$emit('send', 'bye')

this.$root.$on('send', (text) => {
      this.text = text;
  })

Exemple de travail: jsFiddle

Bus d'événement central Vue.js

Une meilleure approche consiste à disposer d'un bus d'événements central: docs

var bus = new Vue();

Vue.component('my-component', {
  template: '<button @click="click">Click me</button>',
  methods: {
    click() {
        bus.$emit('send', 'bye')
    }
  }
})

new Vue({
  el: "#app",
  data: {
    text: "hello"
  },
  created() {
    bus.$on('send', (text) => {
        this.text = text;
    })
  }
})

Exemple de travail: jsFiddle

29
t_dom93

Les composants parents peuvent écouter directement les événements émis par les composants enfants à l'aide de v-on.

html 

<div id="app">
  {{text}}
  <my-component v-on:send="sendText"></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"
  },
  methods: {
    sendText(text) {
      alert(text)
    }
  }
})

Exemple de travail: https://jsfiddle.net/y4yf6nve/2/

32
smek

Pour les références futures, le nom des événements personnalisés ne peut pas être camelCased. Utilisez this.$emit('send_event', 'bye') au lieu de this.$emit('sendEvent', 'bye')https://github.com/vuejs/vue/issues/4044

4
kundan