如上图:

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

vue 的 solt 子组件过滤的更多相关文章

  1. vue 父向子组件传递数据,子组件向父组件传递数据方式

    父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...

  2. vue中修改子组件样式

    一.问题叙述 项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...

  3. vue 实现,子组件向父组件 传递数据

    首先理清组件之间的关系 组件与组件之间,还存在着不同的关系.父子关系与兄弟关系(不是父子的都暂称为兄弟吧). 父子组件 父子关系即是组件 A 在它的模板中使用了组件 B,那么组件 A 就是父组件,组件 ...

  4. Vue基础:子组件抽取与父子组件通信

    在工作中承担一部分前端工作,主要使用Vue + Element UI. 随着版本迭代,需求增加,页面往往变得更加臃肿,不易维护.学习子组件的封装和抽取,能更好适应需求. 为什么需要子组件 可复用 将重 ...

  5. Vue如何更新子组件

    黑科技: 给子组件绑定一个key值,当key值改变时,子组件就会更新 ~

  6. vue通俗易懂的子组件向父组件传值

    不多BB直接上图: 如上图:为子组件绑定点击事件 如上图:send方法触发父组件绑定的事件 如上图:为父组件绑定触发事件@myEvent="aa" aa方法接受子组件传过来的值

  7. vue的在子组件在使用iview库发现的问题

    正常调用没有问题 当写到子组件的时候 这样调用就出问题了 以下是写到子组件出的问题 解决方法  改成了两行写就不会报错了

  8. Vue 中的 子组件 给 父组件 传值

    子组件的某一个事件(sendData)内部,通过this.$emit('事件名', 传递的值)传递数据父组件在调用子组件的地方,绑定了子组件自定义的 事件名(change-data) 定义父组件的地方 ...

  9. vue自定义事件 子组件把数据传出去

    每个 Vue 实例都实现了事件接口(Events interface),即: 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 1.使用v-on绑定自定义 ...

随机推荐

  1. 应急响应系列之OA被入侵挖矿分析报告

    一 基本情况 1.1  简要 此事件是去年应急处置时完成的报告,距今有半年时间了.一直存在电脑里,最近准备完善应急响应中遇到的各类安全事件,这篇文章作为这一系列的开端. 对于 Linux 安全检查,个 ...

  2. 巧用 CSS 实现酷炫的充电动画

    循序渐进,看看只使用 CSS ,可以鼓捣出什么样的充电动画效果. 画个电池 当然,电池充电,首先得用 CSS 画一个电池,这个不难,随便整一个: 欧了,勉强就是它了.有了电池,那接下来直接充电吧.最最 ...

  3. input标签type="file"上传文件的css样式

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. Ubuntu 命令行连接WiFi

    查看是否已经正确安装无线网卡 iwconfig .启动无线网卡, 如果网卡是wlan0 # 方式1 ifconfig wlan0 up # 或者方式2 ip link set wlan0 up .扫描 ...

  5. Win10 设备管理器一个USB设备描述符请求失败解决方法

    问题:进入设备管理器,发现[通用串行总线控制器]下有一项带有黄色[!]未知USB设备(设备描述符请求失败). 或者 解决方法如下: 1.点击Windows键 +R或者(点击系统桌面左下角[开始],在开 ...

  6. 漏洞分析:OpenSSH用户枚举漏洞(CVE-2018-15473)分析

    漏洞分析:OpenSSH用户枚举漏洞(CVE-2018-15473)分析 漏洞分析:OpenSSH用户枚举漏洞(CVE-2018-15473)分析 - FreeBuf互联网安全新媒体平台 https: ...

  7. System.Net.WebRequest.cs

    ylbtech-System.Net.WebRequest.cs 发出对统一资源标识符(URI)的请求.这是一个 abstract 类. 1.返回顶部 1. #region 程序集 System, V ...

  8. 如何设置pycharm中使用的环境为本地的环境,而不用重新安装包

    Pycharm的两种环境配置 1.新建一个虚拟环境 一开始使用pycharm创建project的时候,点击创建 create new project: 然后就会弹出下面的窗口,如果我们选择的是上面的选 ...

  9. Opencv图片明暗处理

    Opencv图片明暗处理 #include <iostream> #include <opencv2/opencv.hpp> using namespace std; usin ...

  10. Flutter中的Stack、Align、Positioned的使用

    import 'package:flutter/material.dart'; import 'package:flutter_testdemo001/res/listData.dart'; void ...