인스턴스에서 컴포넌트에 액세스하는 VueJ

인스턴스에서 컴포넌트에 액세스하는 VueJ

인스턴스에서 컴포넌트의 메서드에 액세스하는 방법을 찾고 있습니다.

<button id="live" class="ui primary button" v-on:click.prevent="live">
    Live Text
</button>

바로 내 안에 있어#app그리고 그것을 기동하기 위해서live내 컴포넌트 내부에서 메서드 사용Live.vuever 2.x 이전 버전에서는 많은 문서를 많이 찾았습니다.broadcast그리고.dispatch, 그러나 1시간 후에 를 사용하여 동작시키려 한 후$emit나는 더 이상 내가 무엇을 하고 있는지 잘 모르겠다.

<template>
  <div v-if="loaded">
    Live
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      loading: false,
      loaded: false,
    }
  },
  methods: {
    load: function (event) {
      console.log('loading..')
      this.loaded = !this.loaded
    }
  },
  mounted: function () {
    // this.$on('liveClick', function (msg) {
    //   console.log(msg)
    // })
  },
  name: 'Live',
  props: {
    'id': Number,
    'key': String
  }
}
</script>

그리고.init.js(라벨 기반 구조입니다)

window.App = new Vue({
   el: '#app',
   methods: {
     live: function (event) {
       this.$emit('liveClick', 'msg')
     }
   }
})

Vuex는 이미 '회피책'을 사용했지만, 이 작업을 수행하기 위해 학습 곡선을 복잡하게 만들 필요는 없습니다.

jsfiddle:https://jsfiddle.net/c4s44qgy/1/

고정 바이올린은 https://jsfiddle.net/gr9c6h64/에서 찾을 수 있습니다.

기본적으로 메인 Vue 인스턴스의 컴포넌트에 데이터를 전달하려면 fielin에서 만든 것처럼 이 컴포넌트에 있는 소품을 사용해야 합니다.props: { loaded: String }다음으로 부모로부터 값을 전달합니다.:loaded='isLoaded'

당신이 하고 싶은 일은 아닌 것 같습니다만, 그것이 당신이 안고 있는 문제인 것 같습니다.도움이 됐으면 좋겠다!

언급URL : https://stackoverflow.com/questions/41463169/vuejs-accessing-components-from-instance