Question

我需要解决它

1）单击mainMidLeft组件
2）点击后，移动slideLeftTop组件

问题我不太明白如何以正确的方式做到这一点..

可以在mainMidLeft中创建一个方法，我会像这样做一些方法：

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

Answer 1

最佳做法是使用Vuex State manager和计算方法（getters）和观察者

我已经在jsfiddle为你做了一个工作示例。 https://jsfiddle.net/n4e_m16/wujafg5e/4/

有关vuex如何运作的更多信息，请转到Here

如果您需要更多帮助，请与我们联系：）

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>

Answer 2

如果您不想使用vuex，可以创建一个新的Vue实例作为事件总线（我相信这在Vue教程的某处提到）：

const EventBus = new Vue()

将EventBus导入您需要的地方，您可以通过以下方式发送活动：

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

在接收器组件的created（）中添加以下脚本：

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

我希望这有助于|'·ω·）ノ

如何在Vue中的不同组件之间建立事件桥梁？

2 个答案: