vue 的 solt 子組件過濾過程解析
更新時間：2019年09月07日 11:43:21 作者：muamaker
這篇文章主要介紹了vue 的 solt 子組件過濾過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
如下圖：
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)//因?yàn)檫^濾掉了一個，所以為 [VueComponent, VueComponent]
}
}
</script>
在 mySelect 的 created 和 mounted 里面，分別查看
this.$slots.default和 this.$children
就會發(fā)現(xiàn)內(nèi)部的子組件渲染，與這個有很大關(guān)系，只需要過濾一下 slots 就可以了
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue2項(xiàng)目實(shí)現(xiàn)自定義右鍵菜單,可添加圖標(biāo)、事件等方式
這篇文章主要介紹了vue2項(xiàng)目實(shí)現(xiàn)自定義右鍵菜單,可添加圖標(biāo)、事件等方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue純前端使用exceljs導(dǎo)出excel文件的完整圖文教程
這篇文章將一步一步為大家詳細(xì)介紹一下exceljs插件中的使用,以及如何使用exceljs導(dǎo)出excel文件,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
這篇文章主要介紹了淺談Vue初學(xué)之props的駝峰命名，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)上傳圖片添加水印的升級版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Object.assign觸發(fā)watch原理示例解析
這篇文章主要為大家介紹了Object.assign觸發(fā)watch原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要介紹了vue中如何使用math.js問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue項(xiàng)目利用axios請求接口下載excel
這篇文章主要為大家詳細(xì)介紹了Vue項(xiàng)目利用axios請求接口下載excel，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
vue中國城市選擇器的使用教程(element-china-area-data)
這篇文章主要給大家介紹了關(guān)于vue中國城市選擇器使用(element-china-area-data)的相關(guān)資料,使用element-china-area-data插件可以非常方便地實(shí)現(xiàn)省市縣三級聯(lián)動選擇器,需要的朋友可以參考下2023-11-11
Mint UI 包含豐富的 CSS 和 JS 組件，能夠滿足日常的移動端開發(fā)需要。接下來通過本文給大家分享Mint UI 基于 Vue.js 移動端組件庫，需要的朋友參考下吧2017-11-11
這篇文章主要介紹了vue中的axios配置及接口請求路徑api配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09