Vuejs 2: 컴포넌트에서 부모로 이벤트 전송

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동작하지 않는가?

부모 컴포넌트는 다음을 사용하여 자녀 컴포넌트에서 방출되는 이벤트를 직접 청취할 수 있습니다.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/

this.$emitVue 컴포넌트만 참조해 주세요.를 사용해야 합니다.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

이후 참조를 위해 사용자 지정 이벤트 이름을 camelCase로 바꿀 수 없습니다.사용하다this.$emit('send_event', 'bye')대신this.$emit('sendEvent', 'bye') https://github.com/vuejs/vue/issues/4044

언급URL : https://stackoverflow.com/questions/42156059/vuejs-2-send-event-from-component-to-parent