溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vue 的 solt 子組件過濾過程解析

發(fā)布時間：2020-10-06 17:27:46 來源：腳本之家 閱讀：226 作者：muamaker 欄目：web開發(fā)

如下圖：

vue 的 solt 子組件過濾過程解析

1、定義了一個類似下拉的組件 mySelect ， 然后里面有自定義的組件 myOptions

2、有很多時候，我們希望， mySelect 組件內(nèi)部的子組件，只能是 myOptions 。 不應(yīng)該有 <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

就會發(fā)現(xiàn)內(nèi)部的子組件渲染，與這個有很大關(guān)系，只需要過濾一下 slots 就可以了

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手