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 面向对象,实现namespace,class,继承,重载
Oct 29 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 Javascript
JavaScript在XHTML中的用法详解
Apr 11 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 Javascript
javascript实现div的显示和隐藏的小例子
Jun 25 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
jquery.validate使用详解
Jun 02 Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 Javascript
JS高阶函数原理与用法实例分析
Jan 15 Javascript
react同构实践之实现自己的同构模板
Mar 13 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
杏林同学录(四)
2006/10/09 PHP
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
PHP无限分类(树形类)
2013/09/28 PHP
在Mac OS上编译安装Nginx+PHP+MariaDB开发环境的教程
2016/02/23 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
JavaScript 指导方针
2007/04/05 Javascript
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
通过bootstrap全面学习less
2016/11/09 Javascript
微信小程序之电影影评小程序制作代码
2017/08/03 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
12岁生日感言
2014/01/21 职场文书
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
搞笑老公保证书
2015/02/26 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
运动会表扬稿范文
2015/05/05 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书
校运会班级霸气口号
2015/12/24 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
JavaScript实现简单拖拽效果
2021/09/15 Javascript