【无标题】

vue传参

事件总线(vue实例) $bus

main文件注册：

// 注册 $bus 
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App),
   beforeCreate() {
    window.$bus = Vue.prototype.$bus = this
  }
})
//组件方法触发
this.$bus.$emit(方法名,传参)
//组件方法接收
this.$bus.$on(对应的方法名,传过来的数据=>{
接收数据
})

父孙组件通信 $attrs和$listeners

// $attrs和$listeners
在孙组件上绑定属性
<Son1 v-bind="$attrs" v-on="$listeners" />
孙组件就可通过$attrs对象（没有被props接收的值集合）
拿到父组件传过来的值并且
通过this.$emit(方法名,传参)传参了

vuex

// 定义test
const state = {
  num: 0,
  person: {
    name: "张三",
    age: 18,
  },
  hobby: [],
};
const mutations = {
  SET_NUM: (state, num) => {
    state.num = num;
  },
  SET_PERSON: (state, person) => {
    state.person = person;
  },
  SET_HOBBY: (state, hobby) => {
    state.hobby = hobby;
  },
};
const actions = {
  changeNum({ commit }, num) {
    commit("SET_NUM", num);
  },
  editPerson({ commit }, obj) {
    commit("SET_PERSON", obj);
  },
  handleHobby({ commit }, arr) {
    commit("SET_HOBBY", arr);
  },
  triggerHobby({ dispatch }, arr) {
    dispatch("handleHobby", arr);
  },
};
export default {
  namespaced: true,
  state,
  mutations,
  actions,
};

//getters.js
testNum:state => state.test.num,

//组件使用辅助函数
import { mapState,mapGetters  } from "vuex";
  computed:{
    //方式一
    ...mapState(["test"]),
     //方式二
    ...mapState({
      curNum: (state) => state.test.num,
      person: (state) => state.test.person,
      hobby: (state) => state.test.hobby,
    }),
    //计算属性写法
    ...mapGetters(["testNum"]),
  },
//调用dispatch触发
this.$store.dispatch('test/setSize', size)