vue中的 $slot 获取插槽的节点实例
更新时间：2019年11月12日 18:04:26 作者：dongceha
今天小编就为大家分享一篇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]) // 获得 那些 插入的 按钮
}
}
以上这篇vue中的 $slot 获取插槽的节点实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue点击切换Class变化,实现Active当前样式操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
vue3出来好一段时间了,一直想着用一下,下面这篇文章主要给大家介绍了关于vue3使用element ui的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
通常我们的项目会越做越大,页面也会越来越多,随之而来的是接口数量的增加,api统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护,下面这篇文章主要给大家介绍了关于axios二次封装的详细过程与跨域问题的相关资料,需要的朋友可以参考下2022-09-09
Vue是一套构建用户界面的框架， 开发只需要关注视图层， 它不仅易于上手，还便于与第三方库或既有项目的整合。这篇文章主要介绍了vue中使用elementUI组件手动上传图片,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了vue项目中使用token的身份验证的简单实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要介绍了如何在Vue中导入Excel文件，文中的示例代码讲解详细，对我们学习或工作有一定帮助，感兴趣的小伙伴可以跟随小编一起了解一下2022-01-01
随着现在vue3越来越普及，相应的面试题也多了起来。说到vue3的面试题，有一个最经典的就是对于实现ref和reactive这两个方法的底层原理，本文就来和大家简单讲讲吧2023-04-04
今天小编就为大家分享一篇vue 点击按钮实现动态挂载子组件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了element-ui table表格底部合计自定义配置过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了VUE实现弹出框点击空白页弹框消失,实现方法可以在Vue中实现弹出框然后通过点击空白页面来让弹窗隐藏,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2023-12-12
最新评论