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 相关文章推荐
玩转方法:call和apply
May 08 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
JS扩展方法实例分析
Apr 15 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
关于iframe跨域POST提交的方法示例
Jan 15 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
Feb 14 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 Javascript
vue实现淘宝购物车功能
Apr 20 Javascript
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
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 error_log 函数的使用
2009/04/13 PHP
php 启动报错如何解决
2014/01/17 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
原生js中ajax访问的实例详解
2017/09/19 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
Python深入学习之上下文管理器
2014/08/31 Python
python numpy存取文件的方式
2020/04/01 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
python怎么判断素数
2020/07/01 Python
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
C#面试题
2016/05/06 面试题
师范生实习自我鉴定
2013/11/01 职场文书
2014年公司迎新年活动方案
2014/02/24 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL