web-dev-qa-db-ja.com

Vuejs 2：コンポーネントから親にイベントを送信

私はこのコードを持っています：

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

作業例： https://jsfiddle.net/rjurado/y4yf6nve/

イベントsendが機能しないのはなぜですか？

vuejs2
21
drinor

this.$emitは、Vueコンポーネントのみを参照します。ルートインスタンスからコンポーネントと通信するには、rootインスタンスプロパティを使用する必要があります。したがって、基本的にイベントにルートを追加します。

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

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

作業例： jsFiddle

Vue.js中央イベントバス

さらに良い方法は、中央イベントバスを使用することです。 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;
    })
  }
})

作業例： jsFiddle

29
t_dom93

親コンポーネントは、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)
    }
  }
})

作業例： https://jsfiddle.net/y4yf6nve/2/

32
smek

将来の参照のために、カスタムイベント名をcamelCasedにすることはできません。 this.$emit('send_event', 'bye')の代わりにthis.$emit('sendEvent', 'bye')を使用します https://github.com/vuejs/vue/issues/4044

4
kundan