vue组件化常用技术

组件传值和通信

父组件传给子组件

属性props

  //   子组件
  props:{ msg : String }
  //  父组件
  <child :msg="hello"></child>

引用refs

  //  父组件
  <child ref="comp"></child>
  this.refs['comp'].msg = 'hello'

子组件传给父组件

$emit

  //  子组件
  this.$emit('add',addFunction)
  //  父组件
  <child @add="add($event)"></child>

兄弟组件

通过共同的父组件搭桥

  //  组件1
  this.$parent.$emit('add',addFunction)
  //  组件2
  this.$parent.$on('add',handleAddFunction)

祖先和后代之间

祖先传给后代–provide/inject

  //  祖先
  provide(){
  	return {foo : 'foo'}
  }
  //  后代
  inject: ['foo']

后代传给祖先–dispatch

	//  定义一个派发的方法，指定派发的方法名和数据
	function dispatch(eventName,data){
		let parent = this.$parent
		//  只要父组件存在就一直往上找
		while(parent){
			parent.$emit(eventName,data)
			parent = parent.$parent
		}
	}
	//  后代组件中使用
	<h1 @click="dispatch('sayHello','hello')">你好</h1>
	//  祖先组件中
	this.$on('sayHello',this.sayHello)

任意两个组件之间传值

事件总线

	//  方式一：创建一个bus类 
	class Bus(){
		constructor(){
			this.callbacks = {}
		}
		$on(name,fn){
			this.callbacks[name] = this.callbacks[name] || []
			this.callbacks[name].push(fn)
		}
		$emit(name,args){
			if(this.callbacks[name]){
				this.callbacks[name].forEach(cb => cb(args))
			}
		}
	}
	//  使用
	Vue.prototype.$bus = new Bus()
	//  组件1
	this.$bus.$emit('sayHello',sayHello)
	//  组件2
	this.$bus.$on('sayHello')

vuex