潜伏在19年vueConf的交流群很久了 今日无意间发现群里大佬们已经开始做新版本vue文档的中文化翻译工作了
看来新版本已经近在咫尺了
正好有空就把官方的docs-next扒下来看看有什么好玩的新功能吧
深入组件章节
Non-Prop Attributes
我们都知道在原来组件通信之中,props单向数据流中父到子一个重头环节。 现在这个新增的非prop属性是个什么玩意呢?
根据文档加上本人的渣翻
组件的非prop属性是指传给子组件,且没有在
props和emits中定义的属性和事件监听,类似id和class
大家可能会说props我知道是啥,emit不是用$去出发自定义事件的吗
别慌,这个也是个新特性,马上就会提到
属性继承
上面提到的这些非prop属性会自动受到一个继承的效果,并直接注入到一个只返回一个根组件的子组件上
这样有什么好处呢?
按照文档给出的例子就是一些html属性可以直接在父组件写入
例如change事件,可以自动绑定到子组件<select>上的原生事件,无需我们再emit进行触发了。
当然自动继承也就意味着有时候也并不需要这项功能,你可以用过手动设置inheritAttrs为false来禁用掉。
这个场景通常是指你可能将这些属性绑定到非根元素上,
这时候你就可以通过$attrs来获取他们,再通过bind绑定了
自定义事件
现在可以通过类似props的emits属性来直接定义所有的事件了。
相对于传入的props,子组件触发的事件通过新属性就可以更清晰的展现出来。
给这个功能点个赞,不然多人协作时,找事件确实很影响效率。
既然都提到类似了,emits也就如出一辙。
既可以通过数组列举,也可以用对象形式进行验证。
对于一些复杂的项目很有必要,传值的双向验证也就齐活了。
当然,可能一些快速迭代业务的同学就会觉得徒增代码量了
更多的内容还待阅读后补充,欢迎大家指出错误
切记一切以最终发布的文档为准!
最后附上参考官方文档链接