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判断单个复选框是否被选中的代码
Sep 03 Javascript
jquery 子窗口操作父窗口的代码
Sep 21 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
JS Loading功能的简单实现
Nov 29 Javascript
js中function()使用方法
Dec 24 Javascript
深入理解Vue.js源码之事件机制
Sep 27 Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 Javascript
发布Angular应用至生产环境的方法
Dec 10 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
Aug 17 Javascript
原生JS实现贪吃蛇小游戏
Mar 09 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 31 Javascript
node中使用shell脚本的方法步骤
Mar 23 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 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
php定时执行任务设置详解
2015/02/06 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
Javascript 之封装(Package)
2018/09/14 Javascript
webpack dll打包重复问题优化的解决
2018/10/10 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
python自动化报告的输出用例详解
2018/05/30 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
Python如何给函数库增加日志功能
2020/08/04 Python
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
应届生人事助理求职信
2013/11/09 职场文书
《穷人》教学反思
2014/04/08 职场文书
亮剑精神观后感
2015/06/05 职场文书
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android