组件封装

在做vue项目时，为了节约开发时间，一般都会封装高复用得UI组件，类似于iview，elementUI等UI组件，一般简单
的组件之间传值就不在这多说了，直接在这说点实际的

实际情况：
需要封装一个组件，在多个页面都可以用，会有两个按钮根据页面的不同处理的事件也不同

最初

封装好组件之后父组件给子组件传一个特别的，在子组件做判定再决定做什么操作，这就会导致封装的组件会在
同一个事件处理上有很多种情况，很臃肿；下面只把有用的代码放出来：

父组件 type='t3’

<Search :type="type">
</Search>

子组件

<button @click="showThat"></button>

props: {
	type: String
},
//这种方式在methods里面的一个函数里代码就很多，以后如果再使用又要再里面加就很烦
methods: {
	showThat () {
		if (this.type === 't3') {
			//这里进行t3的操作
		} else if (this.type === 't5') {
			//这里进行t5的操作
		} else {
			//
		}
	}
}

改进后

后来就想着像UI框架一样一般都是传个函数进去，但是就会涉及到子组件监听父组件到是否传递函数，如果没传
递时不能触发，最开始不知道用什么方法，再网上找了下才找到，通过this.$listeners可以实现

父组件

<Search @showImg="showIt">
</Search>

methods: {
	showIt () {
		//这是父组件的操作
	}
}

子组件

<button @click="showMe"></button>

methods: {
	showMe () {
	// this.$listeners监听父组件是否添加该事件,添加了再触发
	// 这样一来就类似于其他UI框架了，每个父组件把需要的操作传递就好了
		if (this.$listeners['showImg']) {
        	this.$emit('showImg')
        }
	}
}

更具体的可以见：https://blog.csdn.net/HockJerry/article/details/113644038