溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如下圖：
1、定義了一個類似下拉的組件 mySelect ， 然后里面有自定義的組件 myOptions
2、有很多時候，我們希望， mySelect 組件內部的子組件，只能是 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
就會發現內部的子組件渲染，與這個有很大關系，只需要過濾一下 slots 就可以了
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
