从品牌网站建设到网络营销策划,从策略到执行的一站式服务
之前需要对 el-button
做二次封装,所以就用到 vue
的 $attrs
和 $listeners
属性,这两个属性在这不细说,可以在这里 查看详情。
为滴道等地区用户提供了全套网页设计制作服务,及滴道网站建设行业解决方案。主营业务为成都网站建设、网站建设、滴道网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!
二次封装代码(limit-button)
这样封装的好处就是不需要将上层每个属性都写一次 prop
定义,对 listeners
也不需要做一层中转 emit
。
发现问题
在某个页面,点击经过封装的 limit-button
会使页面进行刷新
起初以为是点击事件的冒泡产生的,就把上层引用的 @click
去掉:
点击
发现还是一样会产生刷新的事件。
思考可能是 $listeners
的问题,在 mounted
中打印也只有 @click
事件,就算去掉 $listeners
也不管用。 后来在浏览器对dom结构的查看,发现 limit-button
编译后变成:
可以看到编译后的 type
变成了 warning
,查 element
的源码可发现
可发现是 $attrs
覆盖了 el-button
的nativeType
问题简化重现
重现链接
解决方法
将 type
分出来 props
,然后再通过 prop 引用
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
咨询相关问题或预约面谈,可以通过以下方式与我们联系
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询400-028-6601
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图