vue 的 solt 子组件过滤
2024-08-24 22:45:40
如上图:
1、定义了一个类似下拉的组件 mySelect , 然后里面有自定义的组件 myOptions
2、有很多时候,我们希望, mySelect 组件内部的子组件,只能是 myOptions 。 不应该有 <div>666</div>
3、在mySelect 里面做一层过滤,去掉不需要的组件
下面先看看
myOptions.vue 组件代码
<template>
<div class="options">
<div>这里是 options</div>
</div>
</template> <script>
// @ is an alias to /src
export default {
name: 'myoptions',
data(){
return {}
},
created(){ },
mounted(){ }
}
</script>
接下来是 mySelect 的代码:
<template>
<div class="select">
<div>这里是 Select</div>
<slot></slot>
</div>
</template> <script>
// @ is an alias to /src export default {
name: "myselect",
data(){
return {
_children:[]
}
},
created(){
console.log(this.$children) // 输出为 []
console.log(this.$slots.default) //输出为 [VNode, VNode, VNode]
var arr = this.$slots.default || []
var res = [];
for(var i = 0; i < arr.length; i++){
var item = arr[i];
if(item.componentOptions && item.componentOptions.tag == "myOptions"){
res.push(item);
}
}
this._children = res;
this.$slots.default = res;
},
mounted(){
console.log(this.$slots.default) //[VNode, VNode]
console.log(this.$children)//因为过滤掉了一个,所以为 [VueComponent, VueComponent]
}
}
</script>
在 mySelect 的 created 和 mounted 里面,分别查看
this.$slots.default和 this.$children
就会发现内部的子组件渲染,与这个有很大关系,只需要过滤一下 slots 就可以了
最新文章
- Android之弹出/隐藏系统软键盘
- R内存管理与垃圾清理
- 在windows 10中使用pip安装psutil 4.3.0
- CVS的使用
- js正则学习及一些正则集合
- 数组Api .map()的使用
- js实现class样式的修改、添加及删除的方法
- 2017广东工业大学程序设计竞赛决赛 题解&;源码(A,数学解方程,B,贪心博弈,C,递归,D,水,E,贪心,面试题,F,贪心,枚举,LCA,G,dp,记忆化搜索,H,思维题)
- commons-httpclient 实现get和post请求
- js中的正则
- Program Hyundai i20 Smart Key with VVDI &; Xtool X100 Pad2
- 在平衡树的海洋中畅游(二)——Scapegoat Tree
- AngularJS------命令行
- 使用webpy创建一个简单的restful风格的webservice应用
- UVM中Callback机制
- 20145312 《网络对抗》PC平台逆向破解:注入shellcode和 Return-to-libc 攻击实验
- asp.net hessian + android hessdroid
- js中window对象详解以及页面跳转
- Node开发项目管理工具 Grunt 对比 Gulp
- CodeForces 474C Captain Marmot (数学,旋转,暴力)
热门文章
- 迭代硬阈值类算法总结||IHT/NIHT/CGIHT/HTP
- 通过字节码分析this关键字以及异常表的作用
- 小D课堂 - 零基础入门SpringBoot2.X到实战_第9节 SpringBoot2.x整合Redis实战_40、Redis工具类封装讲解和实战
- html表格导出Excel的一点经验心得
- 处理 Bootstrap CSS 冲突
- openresty开发系列28--openresty中操作mysql
- 004-行为型-10-中介者模式(Mediator)
- ES6深入浅出-3 三个点运算 &; 新版字符串-1.函数与对象的语法糖
- 亲爱的mssql码农们,看看利用sp_addlinkedserver实现远程数据库链接
- [Google] 9717 取数对弈