• Vue——slot


      阅读Vue应用代码时看到自定义组件中使用了<slot>标签,刚开始还不知道它的用法,有点陌生,后来在Vue的官网中了解到,这是插槽的用法,不过在 Vue 2.6.0 中,Vue为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令),它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。Vue实现的一套内容分发的API,将<slot> 元素作为承载分发内容的出口,简单来说若自定义组件中没有<slot> 元素,则该组件起始标签和结束标签之间的任何内容都会被抛弃,而正是自定义组件中含有<slot>标签,这样在使用自定义组件时可以将起始标签和结束标签之间的内容填充到<slot>标签所在的位置,这就是插槽的作用;插槽内可以包含任何模板代码,包括 HTML。

      父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。

      (1)一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

      (2)<slot> 元素有一个特殊的 attribute:name,这个 attribute 可以用来定义额外的插槽。

      (3)在向具名插槽提供内容的时候,可以在一个 <template> 元素上使用 v-slot 指令,并以 v-slot 的参数的形式提供其名称。

      (4)v-slot 只能添加在 <template> 上,不过当被提供的内容只有默认插槽时,组件的标签才可以被当作插槽的模板来使用,这样就可以把 v-slot 直接用在组件上。

      (5)在Vue2.x版本中还是可以继续使用slot attribute,在<template>上使用特殊的slot attribute,可以将内容从父级传给具名插槽;或者直接把 slot attribute 用在一个普通元素上。

      (6)在Vue2.x版本中还是可以继续使用slot-scope attribute ,在 <template> 上使用特殊的 slot-scope attribute,可以接收传递给插槽的 prop;slot-scope attribute 也可以直接用于非 <template> 元素 (包括组件)。

      (6)在Vue3版本中将不会使用slot和slot-scope属性了。

      题外话:Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容ECMAScript 5 的浏览器。

    阅读是一种修养,分享是一种美德。
  • 相关阅读:
    自动化测试之web自动化测试
    unittest框架中读取有特殊符号的配置文件内容的方法-configparser的RawConfigParser类应用
    No matching distribution found for selenium
    python之selenium多窗口切换
    python之selenium玩转鼠标操作(ActionChains)
    python之selenium三种等待方法
    python之selenium元素定位方法
    hadoop零基础系列之一:虚拟机下的Linux集群构建
    MapReduce分布式缓存程序,无法在Windows下的Eclipse中执行问题解决
    协程详解(三)
  • 原文地址:https://www.cnblogs.com/bien94/p/12505353.html
走看看 - 开发者的网上家园