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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue 的 solt 子组件过滤过程解析，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1404字，纯文字阅读大概需要3分钟。

内容图文

如下图：

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 就可以了

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

内容总结

以上是互联网集市为您收集整理的vue 的 solt 子组件过滤过程解析全部内容，希望文章能够帮你解决vue 的 solt 子组件过滤过程解析所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---