Как построить мост событий между различными компонентами в Vue? - PullRequest
Новая
       9

Как построить мост событий между различными компонентами в Vue?

0 голосов
/ 09 июня 2018

Мне нужно решить эту проблему

  • 1) щелкнуть компонент mainMidLeft
  • 2) после нажатия, чтобы переместить компонент slideLeftTop

http://joxi.ru/ZrJBvERH1JVa8r

Проблема, которую я не совсем понимаю, как сделать это правильно.

Можно ли создать в mainMidLeft метод, в котором я сделаю что-то вроде этого: 

move: () => {
   document.querySelector(`.slideLeftTop`).style.position .....
}

Ответы [ 2 ]

0 голосов
/ 10 июня 2018

Если вы не хотите использовать vuex, вы можете создать новый экземпляр Vue в качестве шины событий (я думаю, это упоминается где-то в руководстве Vue): 

const EventBus = new Vue()

Импортировать EventBus кудавам это нужно, и вы можете отправить событие следующим образом: 

EventBus.$emit('event-name', data)

И добавить следующий скрипт в созданный () компонента вашего получателя: 

EventBus.$on('event-name', ($event) => {
        // Do something
    })

Надеюсь, это поможет | ´ ・ω ·) ノ * * +1010

0 голосов
/ 09 июня 2018

Лучше всего использовать менеджер состояний Vuex с вычисленными методами (получателями) и наблюдателями

Я сделал для вас рабочий пример на jsfiddle.https://jsfiddle.net/n4e_m16/wujafg5e/4/

Для получения дополнительной информации о том, как работает vuex, перейдите по ссылке Здесь

Пожалуйста, дайте мне знать, если вам нужна дополнительная помощь:) 

const store = new Vuex.Store({
  state: {
    mainMidLeftState: false,
  },

  getters: {
    mainMidLeftState: state => state.mainMidLeftState,
  },

  mutations: {
    toggleMainMidLeft: (state, payload) => {
      state.mainMidLeftState = !state.mainMidLeftState
    },
  },
})


Vue.component('main-mid-left', {
  data() {
    return {

    }
  },
  computed: {
    mainMidLeftState() {
      return this.$store.state.mainMidLeftState
    },
  },
  methods: {

    toggleMainMidLeft() {
      this.$store.commit('toggleMainMidLeft')
      //  alert(this.mainMidLeftState)
    },
  }
})

Vue.component('slide-left-top', {
  data() {
    return {

    }
  },
  computed: {
    mainMidLeftState() {
      return this.$store.state.mainMidLeftState
    },
  },
  watch: {
    mainMidLeftState: function(val) {
      alert("YES, computed property changed and alert have been triggered by watcher in slide top left component")
    }
  },
  methods: {

  }
})

const app = new Vue({
  el: '#app',
  store,
})
div {
  color: black;
}
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>

<div id="app">

  <!-- inlining the template to make things easier to read - all of below is held on the component not the root -->
  <main-mid-left inline-template>
    <div>
      <h4>
        main mid left
      </h4>
      <button v-on:click="toggleMainMidLeft()">toggle Main Mid Left State</button>

      <div v-show="mainMidLeftState == true">State is true</div>
      <div v-show="mainMidLeftState == false">State is false</div>
    </div>


  </main-mid-left>

  <slide-left-top inline-template>
    <div>

      <h4>
        slide left top
      </h4>
      <div v-show="mainMidLeftState == true">State is true</div>
      <div v-show="mainMidLeftState == false">State is false</div>
    </div>
  </slide-left-top>
</div>
...