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

如下圖：

創(chuàng)新互聯(lián)主要從事網(wǎng)站設計制作、成都網(wǎng)站制作、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務三穗,10余年網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:18980820575

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

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

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

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當前標題：vue的solt子組件過濾過程解析
網(wǎng)站地址：http://jinyejixie.com/article26/jdoejg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供面包屑導航、外貿(mào)建站、搜索引擎優(yōu)化、標簽優(yōu)化、手機網(wǎng)站建設、全網(wǎng)營銷推廣

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

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