快捷導(dǎo)航

vue 的 solt 子組件過(guò)濾過(guò)程解析

更新時(shí)間：2019年09月07日 11:43:21 作者：muamaker

這篇文章主要介紹了vue 的 solt 子組件過(guò)濾過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

如下圖：

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

2、有很多時(shí)候，我們希望， mySelect 組件內(nèi)部的子組件，只能是 myOptions 。不應(yīng)該有 <div>666</div>

3、在mySelect 里面做一層過(guò)濾，去掉不需要的組件

下面先看看

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>

接下來(lái)是 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)//因?yàn)檫^(guò)濾掉了一個(gè)，所以為 [VueComponent, VueComponent]
 }
}
</script>

在 mySelect 的 created 和 mounted 里面，分別查看

this.$slots.default和 this.$children

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue2項(xiàng)目實(shí)現(xiàn)自定義右鍵菜單,可添加圖標(biāo)、事件等方式
這篇文章主要介紹了vue2項(xiàng)目實(shí)現(xiàn)自定義右鍵菜單,可添加圖標(biāo)、事件等方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-04-04
Vue純前端使用exceljs導(dǎo)出excel文件的完整圖文教程
這篇文章將一步一步為大家詳細(xì)介紹一下exceljs插件中的使用,以及如何使用exceljs導(dǎo)出excel文件,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2025-03-03
淺談Vue初學(xué)之props的駝峰命名
這篇文章主要介紹了淺談Vue初學(xué)之props的駝峰命名，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07
vue實(shí)現(xiàn)上傳圖片添加水印(升級(jí)版)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)上傳圖片添加水印的升級(jí)版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
Object.assign觸發(fā)watch原理示例解析
這篇文章主要為大家介紹了Object.assign觸發(fā)watch原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
vue中如何使用math.js
這篇文章主要介紹了vue中如何使用math.js問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
Vue項(xiàng)目利用axios請(qǐng)求接口下載excel
這篇文章主要為大家詳細(xì)介紹了Vue項(xiàng)目利用axios請(qǐng)求接口下載excel，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
vue中國(guó)城市選擇器的使用教程(element-china-area-data)
這篇文章主要給大家介紹了關(guān)于vue中國(guó)城市選擇器使用(element-china-area-data)的相關(guān)資料,使用element-china-area-data插件可以非常方便地實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)選擇器,需要的朋友可以參考下
2023-11-11
Mint UI 基于 Vue.js 移動(dòng)端組件庫(kù)
Mint UI 包含豐富的 CSS 和 JS 組件，能夠滿足日常的移動(dòng)端開(kāi)發(fā)需要。接下來(lái)通過(guò)本文給大家分享Mint UI 基于 Vue.js 移動(dòng)端組件庫(kù)，需要的朋友參考下吧
2017-11-11
vue中的axios配置及接口請(qǐng)求路徑api配置
這篇文章主要介紹了vue中的axios配置及接口請(qǐng)求路徑api配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09