2021-11-11 项目自定义组件通信

组件通信

子孙之间的通信一般使用$attr和$listener这两个属性，但是如果我的子组件是用户手动添加进去的，就无法把这两个属性直接绑定到标签上面，查了element的解决方式，发现它将组件通信是封装了的，看了一遍它的东西，用的是mixins来实现把子组件的data视为自己的data，就忽略了复杂的组件通信，然后再经过封装来复用。

export default {
    
    
	methods: {
    
    
		/**
		 * 发送消息
		 * @param {Object} componentName 组件名称
		 * @param {Object} eventName 事件名称
		 * @param {Object} params 参数
		 */
		dispatch(componentName, eventName, params) {
    
    
			let parent = this.$parent || this.$root
			let name = parent.$options.componentName
			
			while(parent && (!name || name !== componentName)) {
    
    
				parent = parent.$parent
				
				if(parent) {
    
    
					name = parent.$options.componentName
				}
			}
			
			if(parent) {
    
    
				parent.$emit.apply(parent, [eventName].concat(params))
			}

		}
	}
}

这里通过组件名称来查找到组件，然后调用组件的事件