组件传参和VueX基础

组件传参

子传父 事件

$emit

引用父组件

$parent

引用组件

$children
$refs

引用根组件

$root      根组件 最大组件

事件bus传参

跨层级访问数据（非父子关系）（$on、 $off、 $emit）

1. 创建bus.js
   import Vue from ‘vue’
   var bus = new Vue();
   export default bus;
2. 在要发送数据的组件中导入bus并使用bus.semit
3. 在有接收数据的组件中导入bus并使用bus.$on (注意this)
   注意:任意组件只要导入bus就可以随意的发送与监听数据
   provider 和inject依赖注入{跨层级访问(只读)}
   provide 提供数据 所有子孙都可以通过inject注入数据
   inject 接收父辈组件提供的数据

vuex

1.vuex是使用vue中必不可少的一部分，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得很无能为力，那么vuex就很好的解决了我们这种问题，它相当于一个公共仓库，保存着所有组件都能共用的数据。

vuex使用

1.适合初学者使用，保存数据以及获取数据
1.1:在store文件夹，新建个index.js文件（命名看个人习惯，如果没有该文件夹，可以新建一个，当然也可以不建文件夹，直接新建个js文件也是可以的）
1.2.在新建的js文件中写入如下代码:

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex);
export default new Vuex.Store({
state:{
    pathName: "",
    currDbSource: {},
    currJobData: {},
    DbSource: []
},
mutations:{
    // 保存当前菜单栏的路径
    savePath(state,pathName){
        state.pathName = pathName;
    },
    // 保存当前点击的数据源
    saveCurrDbSource(state,currDbSource){
        state.currDbSource = currDbSource;
    },
    // 保存当前点击的元数据
    saveCurrJobData(state,currJobData){
        state.currJobData = currJobData;
    },
    // 保存所有数据源
    saveDbSource(state,DbSource){
        state.DbSource = DbSource;
    }
}
})

1.3:main.js引用：（注意路径即可）

import store from './store/index';
new Vue({
 el: '#app',
 router,
  store,
 render: h => h(App)
});

1.4:保存数据：（场景举例：当我点击按钮后，我需要把当前的数据保存到vuex中，然后跳转到别的路由，然后使用这些数据）

this.$store.state.变量名

/ / 例如

this.$store.state.currDbSource