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


Posted in Javascript onNovember 12, 2019

vue 中的 $slot

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

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

具名插槽很好理解,但是那个 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 之后的输出

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 获取插槽的节点实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
JavaScript对象链式操作代码(jquery)
Jul 04 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
js运动动画的八个知识点
Mar 12 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
Aug 02 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
微信小程序实现下拉刷新动画
Jun 21 Javascript
解决vue v-for src 图片路径问题 404
Nov 12 #Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 #Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 12 #Javascript
解决Vue在Tomcat8下部署页面不加载的问题
Nov 12 #Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 #Javascript
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 #Javascript
微信小程序点击顶部导航栏切换样式代码实例
Nov 12 #Javascript
You might like
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
python使用分治法实现求解最大值的方法
2015/05/12 Python
Python的Django框架中settings文件的部署建议
2015/05/30 Python
Python实现注册登录系统
2017/08/08 Python
对python函数签名的方法详解
2019/01/22 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
python 实现两个线程交替执行
2020/05/02 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
保安员岗位职责
2013/11/17 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
学生会干部任命书
2015/09/21 职场文书
篮球拉拉队口号
2015/12/25 职场文书
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
Python访问Redis的详细操作
2021/06/26 Python
mysql sock 文件解析及作用讲解
2022/07/15 MySQL