vue 中的 $slot

以前一直不知到这个东西，后来发现 vue api 中 藏着很多的 很神奇的 api，比如这个

具名插槽很好理解，但是那个 default 就有点难了，

写了一个炒鸡简单的 demo

father:

<template>
<div>
  <button @click="getSlot">getSlot</button>
  <try ref="try">
    <div class="hello1">hello1</div>
    <div class="hello2">hello2</div>
    <div class="hello3">hello3</div>
  </try>
  <button @click="getArc">getArc</button>
</div>
</template>
<script>
import try from './try'
export default {
  components: {
    try
  },
  methods: {
    getSlot () {
      this.$refs.try.getSlot()
    }
  }
}
</script>
 

try.vue

 

<template>
<div>
  <h2>我是子组件 的 标题</h2>
  <slot>
   只有在没有内容分发的时候我才会出现
  </slot>
</div>
</template>
<script>
export default {
  methods: {
    getSlot () {
      console.log(this.$slots)
    }
  }
}
</script>

 

 

点击了getSlot 之后的输出

 

可以看到 default ，

里面有插入的 三个 标签和 三个标签之间的 两个 空格，就有 5 个 了

通过这个就能很轻易的 拿到 父组件 通过插槽插入 子组件的 标签了

 

this.slotChildren = []
for (let i = 0; i< this.$slots.default.length; i++) {
  if (that.$slots.default[i].elm.nodeType !== 3) {
    that.slotChildren.push(that.$slots.default[i]) // 获得 那些 插入的 按钮
  }
}

这里也可以参考 vue 内置组件：keep-alive 的实现


function pruneCacheEntry (
  cache: VNodeCache,
  key: string,
  keys: Array<string>,
  current?: VNode
) {
  const cached = cache[key]
  if (cached && (!current || cached.tag !== current.tag)) {
    cached.componentInstance.$destroy()
  }
  cache[key] = null
  remove(keys, key)
}
export default {
  name: 'keep-alive',
  abstract: true,

  props: {
    include: patternTypes,
    exclude: patternTypes,
    max: [String, Number]
  },

  created () {
    this.cache = Object.create(null)
    this.keys = []
  },

  destroyed () {
    for (const key in this.cache) {
      pruneCacheEntry(this.cache, key, this.keys)
    }
  },

  mounted () {
    // 监听 include exclude 这两个 props，然后动态的删除修改缓存的数据
    this.$watch('include', val => {
      pruneCache(this, name => matches(val, name))
    })
    this.$watch('exclude', val => {
      pruneCache(this, name => !matches(val, name))
    })
  },
  // 这里使用的就是函数式组件，没有 template 的那种
  render () {
    // 这里就是通过 $slot 获得 的 需要缓存的 组件
    const slot = this.$slots.default
    // 从 其中 获取第一个进行缓存，如上文 所示，default 是一个 数组，从这个数组里面拿到第一个
    const vnode: VNode = getFirstComponentChild(slot)
    const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
    if (componentOptions) {
      // check pattern
      const name: ?string = getComponentName(componentOptions)
      const { include, exclude } = this
      if (
        // not included
        (include && (!name || !matches(include, name))) ||
        // excluded
        (exclude && name && matches(exclude, name))
      ) {
        return vnode
      }

      const { cache, keys } = this
      // 获取缓存的节点 名称，没有的话就拼一个出来
      const key: ?string = vnode.key == null
        ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
        : vnode.key
      // keep-alive 的内置属性之一， cache 和 keys
      if (cache[key]) {
        vnode.componentInstance = cache[key].componentInstance
        // make current key freshest
        // 这里的作用其实也很简单，就是 将 最新使用的节点 名称 放到 缓存 keys 数组的最前面
        // 这样就可以做到 当 设置了 最多缓存的组件之后，超出 则删除 最久没使用的节点
        remove(keys, key)
        keys.push(key)
      } else {
        // 这里 缓存了 当前 vue 页面的 实例，
        cache[key] = vnode
        keys.push(key)
        // prune oldest entry
        if (this.max && keys.length > parseInt(this.max)) {
          pruneCacheEntry(cache, keys[0], keys, this._vnode)
        }
      }

      vnode.data.keepAlive = true
    }
    return vnode || (slot && slot[0])
  }
}

关于 keep-alive 的详解，可以看我的这片文章 vue keep-alive 内置组件与 LRU缓存机制

 

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue