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

如下图：

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

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

赞 (0)

相关推荐

  • Vue2.0 v-for filter列表过滤功能的实现

    使用计算属性app.js var app5 = new Vue({ el: '#app5', data: { shoppingList: [ "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", &quo

  • Vue 过滤器filters及基本用法

    Vue 过滤器filters及基本用法

    1.示例代码 采用vue单文件组件,使用moment插件格式化日期 <template> <div> <h1>{{date | dateFormat}}</h1> </div> </template> <script> import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); export default { dat

  • vue实现前台列表数据过滤搜索、分页效果

    vue实现前台列表数据过滤搜索、分页效果

    本文实例为大家分享了vue实现列表数据过滤搜索.分页效果的具体代码,供大家参考,具体内容如下 job.vue页面 <style lang="scss"> .job-wrapper { padding-top: 50px; } .job-left { float: left; margin-right: 20px; padding: 20px; width: 310px; background: #fff; } .job-serach-title { margin: 8px

  • vue中格式化时间过滤器代码实例

    本文实例为大家分享了vue格式化时间过滤器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://unpkg.com/vue"></script> <

  • vue-cli 3 全局过滤器的实例代码详解

    在vue1.x版本里是自带里几个基础的过滤器的(虽然不怎么用到). 到了vue2.x版本之后,内置到几个过滤器就被删掉了,如果需要用到过滤器,就要开发者自己去定义. 可以把过滤器定义在某个组件内部,但这样就成了局部过滤器,在别的组件里是无法使用的.所以通常不会这么做. 也可以把过滤器写在main.js里.但如果项目中存在多个过滤器,这会使main.js文件看上去很庞大,不便于后期维护. 所以通常会新建一个js文件,专门用来存放所有过滤器.最后再引到main.js中供全局使用. 1.创建 filt

  • 如何去除富文本中的html标签及vue、react、微信小程序中的过滤器

    在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容:然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过 1.富文本去除html标签 去除html标签及 空格 let richText = ' <p style="font-size: 25px;color: white">       sdaflsjf的丰富及饿哦塞尔</p><span>dsfjlie</span>'; /* 去除富

  • Vue数组更新及过滤排序功能

    Vue数组更新及过滤排序功能

    前面的话 Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本.本文将详细介绍Vue数组更新及过滤排序 变异方法 Vue 包含一组观察数组的变异方法,它们将会触发视图更新,包含以下方法 push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度 pop() 从数组末尾移除最后一项,减少数组的length值,然后返回移除的项 shift() 移除数组中的第一个项并返回该项,同时数组的长度减1 unshift() 在数组前端添加任意个

  • vue2 v-model/v-text 中使用过滤器的方法示例

    Vue.js 允许自定义过滤器,一般可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由"管道"符号指示: <!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 v-bind 中 --> <div v-bind:id="rawId | formatId"></div> 可以在一

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

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

    如下图: 1.定义了一个类似下拉的组件 mySelect , 然后里面有自定义的组件 myOptions 2.有很多时候,我们希望, mySelect 组件内部的子组件,只能是 myOptions . 不应该有 <div>666</div> 3.在mySelect 里面做一层过滤,去掉不需要的组件 下面先看看 myOptions.vue 组件代码 <template> <div class="options"> <div>这里

  • Vue+webpack实现懒加载过程解析

    这篇文章主要介绍了Vue+webpack实现懒加载过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 实现方式: 1.webpack method require.ensure([''], callback, chunkName) ; 2.es6 motehod import() import().then() import(/* webpackChunkName: async-chunk-name */ /* webpackMode: l

  • vue slot 在子组件中显示父组件传递的模板

    父组件使用没有指定slot属性,默认为default 在slot中可以使用默认值,如果父组件没有传递对应的slot,则会显示默认值 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue.js" charset="utf-8"></script> </head> <body&

  • vue transition 在子组件中失效的解决

    错误代码: 子组件: <template> <div v-show="showMine"> <div class="mask" @click.self="onMask"></div> <transition name="slide-fade"> <div class="my_group" v-if="showMine"&g

  • vue activated在子组件中的使用详情

    vue activated在子组件中的使用详情

    页面:base: <template> <div class="tab-container"> <h1 style="text-align: center"> 申请{{ form.category }}{{ form.companyType }}入驻 </h1> <div class="form-panel" style="margin-left: 20px;text-align:

  • vue中实现子组件接收父组件方法并获取返回值

    目录 子组件接收父组件方法并获取返回值 父组件 GetCallback.vue 子组件 CallbackChild1.vue 子组件接收父组件的另一种方法 子组件接收父组件方法并获取返回值 项目中有时候会遇到父子组件传值的问题,比如子组件需要接收父组件方法并获取该方法返回值的时候. 使用this.$emit('方法名', '参数1', '参数2')的方式,获取到不是父组件方法的return值.但是我们可以将参数改为回调函数的形式,父组件里执行该回调函数,返回值后给子组件,子组件再接收返回值. 示

  • React.js组件实现拖拽排序组件功能过程解析

    因为使用了react.js技术栈,所以封装优先考虑输入和输出.基于数据驱动去渲染页面.控制拖拽元素的顺序. 由于我不考虑兼容IE8等旧版本浏览器,拖拽的效果采用了HTML5的拖放(Drag 和 drop).当然,如果要求兼容性丰富,使用鼠标点击的相关事件也很简单. 实现的效果如下: 第一步是先了解H5拖放的相关属性,MDN上有详细的说明,链接 有一点需要注意的是,react.js会给所有的属性事件名称前加上"on",后面则为驼峰式写法.例如原生的click事件,在react.js里应使

  • Spring容器注册组件实现过程解析

    1.@Configuration&@Bean给容器中注册组件 @Configuration及@Bean的使用参考如下代码: package com.atguigu.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.ComponentScan; import org.springframework.context.annotation.C

  • 微信小程序引入Vant组件库过程解析

    微信小程序引入Vant组件库过程解析

    前期准备 Vant Weapp组件库: https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.json文件:输入命令:npm init 然后一路回车默认的即可: npm init 项目就回产生一个package.json文件: { "name": "miniprogram", "version": "1.0.0", &qu

  • Vue跨域请求问题解决方案过程解析

    一.这是我们本次要请求的url接口地址http://iwenwiki.com/api/blueberrypai/getBlueBerryJamInfo.php 查看页面响应信息,提示跨域有问题 #### 二.解决上面跨域问题:根目录写入以下vue.config.js // vue.config.js module.exports = { devServer: { proxy: { // 配置跨域 '/api': { target: 'http://iwenwiki.com', ws: true,

随机推荐