vue 的 solt 子組件過濾

如上圖：

一、定義了一個相似下拉的組件 mySelect ， 而後裏面有自定義的組件 myOptions

二、有不少時候，咱們但願， mySelect 組件內部的子組件，只能是 myOptions 。 不該該有  <div>666</div>

三、在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 就能夠了