本篇内容介绍了“Vue3CompositionAPI怎么优雅封装第三方组件”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！对于第三方组件，如何在保持第三方组件原有功能（属性props、事件events、插槽slots、方法methods）的基础上，优雅地进行功能的扩展了？以Element Plus的el-input为例：很有可能你以前是这样玩的，封装一个MyInput组件，把要使用的属性props、事件events和插槽slots、方法methods根据自己的需要再写一遍：可过一段时间后，需求变更，又要在MyInput组件上添加el-input组件的其它功能，可el-input组件总共有20个多属性，免费云主机域名5个事件，4个插槽，那该怎么办呢，难道一个个传进去，这样不仅繁琐而且可读性差。在Vue2中，我们可以这样处理，点击此处查看 封装Vue第三方组件此文诣在帮助大家做一个知识的迁移，探究如何使用Vue3 CompositionAPI优雅地封装第三方组件~在Vue2中$attrs: 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind=”$attrs” 传入内部组件$listeners:包含了父作用域中的 (不含.native修饰器的)v-on事件监听器。它可以通过v-on=”$listeners”传入内部组件而在Vue3中$attrs:包含了父作用域中不作为组件props或自定义事件的 attribute 绑定和事件（包括class和style和自定义事件），同时可以通过 v-bind=”$attrs” 传入内部组件。$listeners对象在 Vue 3 中已被移除。事件监听器现在是$attrs的一部分。在当然，这样还不够。光这样写，我们绑定的属性（包括class和style）同时会在根元素（上面的例子是class=”my-input”的Dom节点）上起作用。要阻止这个默认行为，我们需要设置inheritAttrs为false。下面我们来看看Vue3文档对inheritAttrs的解释默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置inheritAttrs到false，这些默认行为将会被去掉。而通过实例 property$attrs可以让这些 attribute 生效，且可以通过v-bind显性的绑定到非根元素上。于是，我们对于第三方组件的属性props、事件events处理，可以写成如下代码：Vue3中$slots：我们可以通过其拿到父组件传入的插槽Vue3中移除了$scopedSlots，所有插槽都通过$slots作为函数暴露在基于以上几点，如果我们对于第三方组件的封装没有增加额外的插槽，且第三方组件的插槽处于同一个dom节点之中，我们也有一种取巧的封装方式????, 通过遍历$slots拿到插槽的name，动态添加子组件的插槽：如果不满足以上条件的话，咱还得老老实实在子组件中手动添加需要的第三方组件的插槽~对于第三方组件的方法，我们通过ref来实现。首先在MyInput组件中的el-input组件上添加一个ref=”elInputRef”属性，然后通过defineExpose把elInputRef暴露出去给父组件调用。子组件：MyInput.vue父页面：Index.vue的调用代码如下：“Vue3CompositionAPI怎么优雅封装第三方组件”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注百云主机网站，小编将为大家输出更多高质量的实用文章！
相关推荐: JavaScript滑动窗口的最大值问题怎么解决
这篇文章主要讲解了“JavaScript滑动窗口的最大值问题怎么解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript滑动窗口的最大值问题怎么解决”吧！给定一个数组 nums 和滑动窗口的大小 …
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
微信扫一扫 
