纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

vue 的 solt 子组件过滤过程解析

muamaker   2020-05-17 我要评论

如下图:

1、定义了一个类似下拉的组件 mySelect , 然后里面有自定义的组件 myOptions

2、有很多时候,我们希望, mySelect 组件内部的子组件,只能是 myOptions 。 不应该有 <div>666<https://cdn9.52xs.com.cn/div>

3、在mySelect 里面做一层过滤,去掉不需要的组件

下面先看看

myOptions.vue 组件代码

<template>
 <div class="options">
   <div>这里是 options<https://cdn9.52xs.com.cn/div>
 <https://cdn9.52xs.com.cn/div>
</template>
 
<script>
// @ is an alias to /src
export default {
 name: 'myoptions',
 data(){
   return {}
 },
 created(){  
 },
 mounted(){
  }
}
</script>

接下来是 mySelect 的代码:

<template>
 <div class="select">
   <div>这里是 Select<https://cdn9.52xs.com.cn/div>
   <slot></slot>
 <https://cdn9.52xs.com.cn/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 里面,分别查看

猜您喜欢

  • javascript的惯性运动实现代码实例

    这篇文章主要引见了javascript的惯性运动完成代码实例,文中经过示例代码引见的十分细致,对大家的学习或者工作具有一定的参考学习价值,需求的朋友能够参考下..
  • vue的滚动条插件实现代码

    这篇文章主要引见了vue的滚动条插件完成代码,文中经过示例代码引见的十分细致,对大家的学习或者工作具有一定的参考学习价值,需求的朋友能够参考下..

网友评论

Copyright 2020 www.zhuersoft.com 【助尔软件站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式