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 就可以了
vue 的 solt 子组件过滤的更多相关文章
- vue 父向子组件传递数据,子组件向父组件传递数据方式
父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...
- vue中修改子组件样式
一.问题叙述 项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...
- vue 实现,子组件向父组件 传递数据
首先理清组件之间的关系 组件与组件之间,还存在着不同的关系.父子关系与兄弟关系(不是父子的都暂称为兄弟吧). 父子组件 父子关系即是组件 A 在它的模板中使用了组件 B,那么组件 A 就是父组件,组件 ...
- Vue基础:子组件抽取与父子组件通信
在工作中承担一部分前端工作,主要使用Vue + Element UI. 随着版本迭代,需求增加,页面往往变得更加臃肿,不易维护.学习子组件的封装和抽取,能更好适应需求. 为什么需要子组件 可复用 将重 ...
- Vue如何更新子组件
黑科技: 给子组件绑定一个key值,当key值改变时,子组件就会更新 ~
- vue通俗易懂的子组件向父组件传值
不多BB直接上图: 如上图:为子组件绑定点击事件 如上图:send方法触发父组件绑定的事件 如上图:为父组件绑定触发事件@myEvent="aa" aa方法接受子组件传过来的值
- vue的在子组件在使用iview库发现的问题
正常调用没有问题 当写到子组件的时候 这样调用就出问题了 以下是写到子组件出的问题 解决方法 改成了两行写就不会报错了
- Vue 中的 子组件 给 父组件 传值
子组件的某一个事件(sendData)内部,通过this.$emit('事件名', 传递的值)传递数据父组件在调用子组件的地方,绑定了子组件自定义的 事件名(change-data) 定义父组件的地方 ...
- vue自定义事件 子组件把数据传出去
每个 Vue 实例都实现了事件接口(Events interface),即: 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 1.使用v-on绑定自定义 ...
随机推荐
- 应急响应系列之OA被入侵挖矿分析报告
一 基本情况 1.1 简要 此事件是去年应急处置时完成的报告,距今有半年时间了.一直存在电脑里,最近准备完善应急响应中遇到的各类安全事件,这篇文章作为这一系列的开端. 对于 Linux 安全检查,个 ...
- 巧用 CSS 实现酷炫的充电动画
循序渐进,看看只使用 CSS ,可以鼓捣出什么样的充电动画效果. 画个电池 当然,电池充电,首先得用 CSS 画一个电池,这个不难,随便整一个: 欧了,勉强就是它了.有了电池,那接下来直接充电吧.最最 ...
- input标签type="file"上传文件的css样式
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Ubuntu 命令行连接WiFi
查看是否已经正确安装无线网卡 iwconfig .启动无线网卡, 如果网卡是wlan0 # 方式1 ifconfig wlan0 up # 或者方式2 ip link set wlan0 up .扫描 ...
- Win10 设备管理器一个USB设备描述符请求失败解决方法
问题:进入设备管理器,发现[通用串行总线控制器]下有一项带有黄色[!]未知USB设备(设备描述符请求失败). 或者 解决方法如下: 1.点击Windows键 +R或者(点击系统桌面左下角[开始],在开 ...
- 漏洞分析:OpenSSH用户枚举漏洞(CVE-2018-15473)分析
漏洞分析:OpenSSH用户枚举漏洞(CVE-2018-15473)分析 漏洞分析:OpenSSH用户枚举漏洞(CVE-2018-15473)分析 - FreeBuf互联网安全新媒体平台 https: ...
- System.Net.WebRequest.cs
ylbtech-System.Net.WebRequest.cs 发出对统一资源标识符(URI)的请求.这是一个 abstract 类. 1.返回顶部 1. #region 程序集 System, V ...
- 如何设置pycharm中使用的环境为本地的环境,而不用重新安装包
Pycharm的两种环境配置 1.新建一个虚拟环境 一开始使用pycharm创建project的时候,点击创建 create new project: 然后就会弹出下面的窗口,如果我们选择的是上面的选 ...
- Opencv图片明暗处理
Opencv图片明暗处理 #include <iostream> #include <opencv2/opencv.hpp> using namespace std; usin ...
- Flutter中的Stack、Align、Positioned的使用
import 'package:flutter/material.dart'; import 'package:flutter_testdemo001/res/listData.dart'; void ...