如何在vue中利用$slot获取插槽的节点-创新互联

这篇文章主要介绍了如何在vue中利用$slot 获取插槽的节点，创新互联小编觉得不错，现在分享给大家，也给大家做个参考，一起跟随创新互联小编来看看吧！

创新互联-专业网站定制、快速模板网站建设、高性价比锡林郭勒盟网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式锡林郭勒盟网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖锡林郭勒盟地区。费用合理售后完善，十年实体公司更值得信赖。vue是什么软件

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

vue 中的 $slot

以前一直不知到这个东西，后来发现 vue api 中 藏着很多的 很神奇的 api，比如这个

具名插槽很好理解，但是那个 default 就有点难了，

写了一个炒鸡简单的 demo

father:

try.vue

点击了getSlot 之后的输出

可以看到 default ，

里面有插入的 三个 标签和 三个标签之间的 两个 空格，就有 5 个 了

通过这个就能很轻易的 拿到 父组件 通过插槽插入 子组件的 标签了

this.slotChildren = []
for (let i = 0; i< this.$slots.default.length; i++) {
if (that.$slots.default[i].elm.nodeType !== 3) {
that.slotChildren.push(that.$slots.default[i]) // 获得 那些 插入的 按钮
}
}

以上就是创新互联小编为大家收集整理的如何在vue中利用$slot 获取插槽的节点，如何觉得创新互联网站的内容还不错，欢迎将创新互联网站推荐给身边好友。

网页标题：如何在vue中利用$slot获取插槽的节点-创新互联
文章分享：http://mswzjz.cn/article/coiscp.html