Vue总结——组件间通信

组件间通信

组件间通信在Vue中十分常用，有多种 方式可以实现，总结几种常用的

1.父传子——props

使用方法
父组件中,传递两个参数parameter1，parameter2，注意Vue官方建议props传递的数据不要进行修改
可以直接传递字符串

<Child parameter1="parameter1" parameter2="parameter2"></Child>

也可以通过v-bind动态绑定 数据传递

<Child :parameter1="parameter1" :parameter2="parameter2"></Child>

子组件中接受
方法1：只指定名称

props:["parameter1","parameter2"]

方法2：指定类型与名称

props:{
	parameter1:Number,
	parameter2:Function
}

方法3:指定名称，必要性，类型

props:{
	parameter1:{type:String,require:true,default:"必须"},
	parameter2:{type:Function,require:false,default:()=>{
			alert("非必须")
	},
}

2.子传父——自定义事件

子传父也可以通过父组件给子组件传递函数类型的props实现，由子组件调用获取数据，但自定义事件方法更为常用。
在父组件中绑定子组件事件

<Child @anevent="doSomeThing">

methods:{
	doSomeThing(data){
		console.log("doSomeThing执行了"+data)
	}
}

子组件中触发事件，anevent事件被触发调用doSomeThing函数,传递参数data

this.$emit("anevent",this.data)

3.任意组件间通信

任意组件间通信常用的有两种方式，全局事件总线与vuex

使用全局事件总线

全局事件总线的使用方法，给Vue的原型对象上绑定全局事件总线

安装全局事件总线

new Vue({
  el:'#app',
  // 完成了将App组件放入容器中
  render: h => h(App),
  //利用钩子函数挂载属性
  beforeCreate(){
    Vue.prototype.$bus = this 
  }
})

使用全局事件总线，绑定事件

this.$bus.$on("anevent",this.doSomeThing)
//doSomeThing是一个函数，当事件anevent触发时调用

触发anevent事件，传递data作为doSomeThing的参数，调用doSomeThing

this.$bus.$emit("anevent",this.data)

通过Vuex中的state共享数据

使用方法
在main.js中

//引入vuex
import store from "@/store";

new Vue({
  render: h => h(App),
  store //注册vuex
}).$mount('#app')

在store中，给data1动态赋值需要用到mutations和actions，这里不做演示

import Vuex from "vuex";
import Vue from "vue";
Vue.use(Vuex);
const state:{
	data1:1
	data2:2
}
new Vuex.Store({
  state
});

组件中获取数据

 let data1 = this.$store.state.data1