vue的你子组件过滤过程解析

如下图:

1,定义了一个类似下拉的组件mySelect,然后里面有自定义的组件myOptions

2,有很多时候,我们希望,mySelect组件内部的子组件,只能是myOptions。不应该有& lt; div> 666 & lt;/div>

3,在mySelect里面做一层过滤,去掉不需要的组件

下面先看看

myOptions。vue组件代码

　　　　　　& lt; template> 　　& lt; div类="选项"比; 　　& lt; div>这里是options

　　& lt;/div> 　　& lt;/template> 　　　　& lt; script>//@别名/src 　　出口默认{ 　　名称:“myoptions”, 　　数据(){ 　　返回{} 　　}, 　　创建(){ 　　}, 　　安装(){ 　　｝　　｝　　& lt;/script> 　　　　

接下来是mySelect的代码:

　　　　　　& lt; template> 　　& lt; div类="选择"比; 　　& lt; div>这里是Select

　　& lt; slot> & lt;/slot> 　　& lt;/div> 　　& lt;/template> 　　　　& lt; script>//@别名/src 　　　　　　出口默认{ 　　名称:“myselect”, 　　数据(){ 　　返回{ 　　_children: [] 　　｝　　}, 　　创建(){ 　　console.log(这一点。孩子美元)//输出为[] 　　console.log(这一点。slots.default美元)//输出为[VNode、VNode VNode] 　　var arr=Ｃ涝猻lots.default | | [] 　　var res=[]; 　　(var=0;我& lt;arr.length;我+ +){ 　　var项=arr[我]; 　　如果(item.componentOptions,,item.componentOptions.tag==癿yOptions”) { 　　res.push(项); 　　｝　　｝　　这一点。_children=res; 　　美元。slots.default=res; 　　}, 　　安装(){ 　　console.log(这一点。slots.default美元)//[VNode VNode] 　　console.log(这一点。孩子美元)//因为过滤掉了一个,所以为[VueComponent VueComponent] 　　｝　　｝　　& lt;/script> 　　　　

在mySelect的创建和安装里面,分别查看

　　　　　　美元。美元slots.default和。孩子　　　　

就会发现内部的子组件渲染,与这个有很大关系,只需要过滤一下槽就可以了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。