Vue的传值方式

Vue组件之间的几种传值方式：

1.props（父给子传值）

2.$emit（子给父传值）

3.兄弟组件传值（全局事件总线、订阅发布、Vuex）

props传值：(父传子)

//App.vue父组件

	

$emit：子组件向父组件传值（定义事件）

// 子组件
	
	

$emit传值步骤：

1. var Event=new Vue();

2. Event.$emit(事件名,数据);

3. Event.$on(事件名,data => {});

 $ref传值：父组件中写好this.$refs.子组件的ref名.子组件中的事件名（传进的值）

父组件定义

子组件定义

 全局事件总线

首先：安装全局事件总线，main.js入口文件配置

new Vue({
  	......
  	beforeCreate() {
  		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
  	}
  }) 

定义传递的值

this.$bus.$emit('事件名'，传递的值)

接收传递的值：在mounted钩子获取，在beforeDestory中解绑

mounted()
{
//获取
this.$bus.$on('事件名',回调函数)
}
beforeDestory()
{
//解绑
this.$bus.$off('事件名')
}

订阅发布：：依赖第三方库

//端口控制台引入
npm  i pubsub-js

接收数据

mounted(){
            // 第一个参数是订阅的名称 msgName
            // 第二个参数是数据  data
   this.名字=pubsub.subscribe('订阅名',(msgName,data)=>{
                
                
           })
        },
   // 组件销毁前钩子，取消订阅
  beforeDestroy() {
   pubsub.unsubscribe(this.名字)
},

vuex：是集中管理数据的架构，包含module，getter，state，mutation，action。

***安装vuex，一般都是在与app.vue同级的store里的index.js进行配置

import Vue from 'vue'
import Vuex from 'vuex'

//Vuex挂载
Vue.use(Vuex)

//创建VueX对象
export default new Vuex.Store({
    state:{
        //存放的键值对就是所要管理的状态
        name:'helloVueX'
    }
})

main.js中配置

import Vue from 'vue'
import App from './App'
//引入store
import store from './store'
//关机加载时的检测
Vue.config.productionTip = false

new Vue({
//el模板
  el: '#app',
  store,  //将创建的Vuex实例挂载到这个vue实例中
  render: h => h(App)
})

state：用来存储数据

getters：加工state成员给外界 

mutation：用来对state进行操作

Actions：也是用来对state进行成员操作不过是异步操作而且需要提交给mutation不能直接更改