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 相关文章推荐
JavaScript格式化数字的函数代码
Nov 30 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
Jul 08 Javascript
Chosen 基于jquery的选择框插件使用方法
May 30 Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
Jun 19 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
ES6基础之展开语法(Spread syntax)
Feb 21 Javascript
详解javascript函数写法大全
Mar 25 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 Javascript
vue中watch的用法汇总
Dec 28 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
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
php session的锁和并发
2016/01/22 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
javascript 写类方式之二
2009/07/05 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
python+mysql实现简单的web程序
2014/09/11 Python
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
优秀党员转正的自我评价
2013/10/06 职场文书
行政管理毕业生自荐信
2014/02/24 职场文书
关于环保的标语
2014/06/13 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
教师思想工作总结2015
2015/05/13 职场文书
党员身份证明材料
2015/06/19 职场文书
党员发展大会主持词
2015/07/03 职场文书
如何理解python接口自动化之logging日志模块
2021/06/15 Python
java中如何截取字符串最后一位
2022/07/07 Java/Android