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

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

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

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

vue 中的 $slot

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

如何在vue中利用$slot 获取插槽的节点

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

写了一个炒鸡简单的 demo

father:

try.vue

点击了getSlot 之后的输出

如何在vue中利用$slot 获取插槽的节点

可以看到 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://lszwz.com/article/coiscp.html

乐山网站建设

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

我是子组件的标题

其他资讯

联系我们

135-1821-9792

028-86922220

快捷导航

二维码

友情链接交换友情链接

乐山网站建设

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

我是子组件 的 标题

其他资讯

联系我们

135-1821-9792

028-86922220

快捷导航

二维码

友情链接 交换友情链接

我是子组件的标题

友情链接交换友情链接