vue 的 solt 子组件过滤过程解析


Posted in Javascript onSeptember 07, 2019

如下图:

vue 的 solt 子组件过滤过程解析

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 就可以了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery实现页面滚动时层智能浮动定位实例探讨
Mar 29 Javascript
jquery获取tr并更改tr内容示例代码
Feb 13 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
element-ui 表格实现单元格可编辑的示例
Feb 26 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
解决vue-loader加载不上的问题
Oct 21 Javascript
javascript的惯性运动实现代码实例
Sep 07 #Javascript
vue的滚动条插件实现代码
Sep 07 #Javascript
微信小程序页面滚动到指定位置代码实例
Sep 07 #Javascript
通过vue写一个瀑布流插件代码实例
Sep 07 #Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 #Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 #Javascript
解决layer.open后laydate失效的问题
Sep 06 #Javascript
You might like
PHP读MYSQL中文乱码的解决方法
2006/12/17 PHP
PHP中文汉字验证码
2007/04/08 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
php实现简单的上传进度条
2015/11/17 PHP
php实现贪吃蛇小游戏
2016/07/26 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
Vue组件化通讯的实例代码
2017/06/23 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
JavaScript登录验证基础教程
2017/11/01 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
解决pycharm下os.system执行命令返回有中文乱码的问题
2019/07/07 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
公司门卫岗位职责
2014/03/15 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
社区服务标语
2014/07/01 职场文书
股东出资证明书范例
2014/10/04 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
整改通知书格式
2015/04/22 职场文书
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android