时间戳

首页 > 解决方案 > 如何从 vuex 中的子组件向任何父组件触发事件

vuejs2 - 如何从 vuex 中的子组件向任何父组件触发事件

问题描述

所以我有组件“X”作为父组件或组件“Y”作为
父组件，“a”作为子组件触发一个或多个事件
“a”或“a”的任何子兄弟或父级本身可以使用
我想要的事件使用“a”作为独立成分

所以我有自己的“X”组件 

   state
   mutations
   actions 
   getters

我有自己的“一个”组件 

state    
mutations    
actions     
getters

“a”a.vue 文件看起来像这样

<template>
<div>
<app-select 
 @change.native="someevent()" 
 name="lineup_id" 
 v-model="$store.state.form.id" label="Select Id" 
:options="options"
 />
</div>
</template>
import AppSelect from "../AppSelect.vue";
export default {
  data() {
    return {
      options:[]
    };
  },
  components: {
    AppSelect,
  },
}

所以我想从孩子“a”
“X”和“Y”触发更改事件，任何父母都得到那个事件并用那个事件做一些
我知道如何用VUE做的事情

标签： vuejs2vuex

解决方案

拳头：不要使用 $state 获取属性，使用 mapState

<template>
  <div>
    <app-select 
      @change.native="someevent()" 
      name="lineup_id" 
      v-model="explicitPropertyName" label="Select Id" 
      :options="options"
    />
  </div>
</template>
<script>
import AppSelect from "../AppSelect.vue";
import { mapState } from 'vuex'

export default {
  computed : {
      ...mapState(['explicitPropertyName'])
  }
  data() {
    return {
      options:[]
    };
  },
  components: {
    AppSelect,
  },
}
</script>

第二：使用总线事件，看一个例子

Vue.config.productionTip = false
Vue.config.devtools = false

Vue.prototype.$eventBus = new Vue()

const componentA = {
  template : `<button @click="emitMethod">Component A emit</button>`,
  methods: {
    emitMethod () {
       this.$eventBus.$emit('EVENT_NAME_FROM_A', { id: 12, pseudo: "Unicorn power A"});
    }
  },
  mounted () {
    this.$eventBus.$on('EVENT_NAME_FROM_B', function (payload) {
       console.log('Emitted from component B, received in Component A', payload);
    });
  }
}

const componentB = {
  template : `<button @click="emitMethod">Component B emit</button>`,
  methods: {
    emitMethod () {
       this.$eventBus.$emit('EVENT_NAME_FROM_B', { id: 12, pseudo: "Unicorn power"});
    }
  },
  mounted () {
    this.$eventBus.$on('EVENT_NAME_FROM_A', function (payload) {
       console.log('Emitted from component A, received in Component B', payload);
    });
  }
}

const vm = new Vue({ 
  el: "#app",
  components : {
    componentA,
    componentB
  },
  mounted () {
    this.$eventBus.$on('EVENT_NAME_FROM_B', function (payload) {
       console.log('Emitted from component B, received in Parent', payload);
    });
    
    this.$eventBus.$on('EVENT_NAME_FROM_A', function (payload) {
       console.log('Emitted from component A, received in Parent', payload);
    });
  }
})
<!DOCTYPE html>
<html>
   <head>
      <title></title>
   </head>
   <body>
      <div id="app">
         <div>
            <component-b></component-b>
            <component-a></component-a>
         </div>
      </div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
   </body>
</html>

推荐阅读