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 相关文章推荐
新手入门常用代码集锦
Jan 11 Javascript
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
浅谈js中变量初始化
Feb 03 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
js实现继承的5种方式
Dec 01 Javascript
轻松搞定jQuery.noConflict()
Feb 15 Javascript
JS如何判断json是否为空
Jul 06 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
Vue-不允许嵌套式的渲染方法
Sep 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
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
PHP的加密方式及原理
2012/06/14 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
JQuery 使用attr方法实现下拉列表选中
2014/10/13 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
在Python程序中实现分布式进程的教程
2015/04/28 Python
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
Python数组定义方法
2016/04/13 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
简述数据库的设计过程
2015/06/22 面试题
文秘专业自荐信
2013/10/14 职场文书
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
卫生系统先进事迹
2014/05/13 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
红高粱观后感
2015/06/10 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
Python中递归以及递归遍历目录详解
2021/10/24 Python
关于Vue中的options选项
2022/03/22 Vue.js