vue中的$slot获取插槽的节点实例_vue3如何获取$slot - CSDN文库

5星 · 超过95%的资源 128 浏览量更新于2023-05-09 评论收藏 36KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

vue中的中的 $slot 获取插槽的节点实例获取插槽的节点实例

今天小编就为大家分享一篇vue中的 $slot 获取插槽的节点实例，具有很好的参考价值，希望对大家有所帮助。

一起跟随小编过来看看吧

vue 中的中的 $slot

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

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

写了一个炒鸡简单的 demo

father:

<template>

<div>

<button @click="getSlot">getSlot</button>

<try ref="try">

<div class="hello1">hello1</div>

<div class="hello2">hello2</div>

<div class="hello3">hello3</div>

</try>

<button @click="getArc">getArc</button>

</div>

</template>

<script>

import try from './try'

export default {

components: {

try

},

methods: {

getSlot () {

this.$refs.try.getSlot()

}

}

}

</script>

try.vue

<template>

<div>

<h2>我是子组件的标题</h2>

<slot>

只有在没有内容分发的时候我才会出现

</slot>

</div>

</template>

<script>

export default {

methods: {

getSlot () {

console.log(this.$slots)

}

}

}

</script>

点击了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]) // 获得那些插入的按钮

}

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论10

色空空色

2023-06-18

这篇文章对于理解vue中的$slot非常有帮助，值得一读。

weixin_38714637

粉丝: 5
资源: 922

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈