组件封装
在做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