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 相关文章推荐
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
JavaScript动态插入script的基本思路及实现函数
Nov 11 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
javascript显式类型转换实例分析
Apr 25 Javascript
java必学必会之static关键字
Dec 03 Javascript
怎么引入(调用)一个JS文件
May 26 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 Javascript
Vue项目History模式404问题解决方法
Oct 31 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
如何制作自己的原生JavaScript路由
May 05 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
一步一步学习PHP(8) php 数组
2010/03/05 PHP
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
浅谈PHP中的
2016/04/23 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
详解AngularJS中的表格使用
2015/06/16 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
搭建vue开发环境
2018/07/19 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
JQuery中queue方法用法示例
2019/01/31 jQuery
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
layui 解决富文本框form表单提交为空的问题
2019/10/26 Javascript
JS实现轮播图效果
2020/01/11 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
2020/11/10 Javascript
pandas series序列转化为星期几的实例
2018/04/11 Python
python实现自主查询实时天气
2018/06/22 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
python实现四人制扑克牌游戏
2020/04/22 Python
学习python需要有编程基础吗
2020/06/02 Python
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
财务助理岗位职责
2013/11/10 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书