vue 进阶---动态组件 插槽 自定义指令

目录

动态组件

如何实现动态组件渲染

使用 keep-alive 保持状态

keep-alive 对应的生命周期函数

keep-alive 的 include 属性和exclude属性 

插槽

插槽的基础用法

具名插槽

作用域插槽

自定义指令

自定义指令的分类

私有自定义指令

全局自定义指令

了解 eslint 插件的 配置

axios 挂载到veu的原型及全局配置

---

动态组件

动态组件指的是 动态切换组件的显示与隐藏 。

如何实现动态组件渲染

vue 提供了一个内置的 组件， 专门用来实现动态组件的渲染, 示例代码如下

 
 
 


 展示 Left
 展示 Right




data() {
    return {
      // comName 表示要展示的组件的名字
      comName: 'Left'
    }
  },

当is 指向另外一个组件时原本的组件会被销毁

使用 keep-alive 保持状态

默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 组件保持动态组 件的状态。示例代码如下：

 keep-alive 会把内部的组件进行缓存，而不是销毁组件 

keep-alive 对应的生命周期函数

当组件 被缓存 时，会自动触发组件的 deactivated 生命周期函数。

当组件 被激活 时，会自动触发组件的 activated 生命周期函数。

export default {
  
  created() {
    console.log('Left 组件被创建了！')
  },

  // 当组件第一次被创建的时候，既会执行 created 生命周期，也会执行 activated 生命周期
  // 当时，当组件被激活的时候，只会触发 activated 生命周期，不再触发 created。因为组件没有被重新创建
  activated() {
    console.log('组件被激活了，activated')
  },
  deactivated() {
    console.log('组件被缓存了，deactivated')
  }
}

keep-alive 的 include 属性和exclude属性 

include 属性用来指定：只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔：

1、如果在“声明组件”的时候，没有为组件指定 name 名称，则组件的名称默认就是“注册时候的名称”
2. 如果组件声明时候的 “name” 名称  就用声明名称 

exclude属性用来排除 谁不会被缓存 

注意： 不要同时使用 include 和 exclude 这两个属性

对比：

  // 1. 组件的 “注册名称” 的主要应用场景是：以标签的形式，把注册好的组件，渲染和使用到页面结构之中

  // 2. 组件声明时候的 “name” 名称的主要应用场景：结合 标签实现组件缓存功能；以及在调试工具中看到组件的 name 名称

插槽

插槽 （ Slot ）是 vue 为 组件的封装者 提供的能力。允许开发者在封装组件时，把 不确定的 、 希望由用户指定的 部分 定义为插槽

插槽的基础用法

在封装组件时，可以通过 元素定义插槽，从而为用户预留内容占位符。示例代码如下：

组件中

    
    

没有预留插槽的内容会被丢弃

如果在封装组件时 没有预留任何 插槽 ，则用户提供的任何 自定义内容 都 会被丢弃

后备内容

封装组件时，可以为预留的 插槽提供 后备内容 （默认内容）。如果组件的使用者没有为插槽提供任何内容，则后备内容会生效

具名插槽

如果在封装组件时 需要预留多个插槽节点 ，则需要为每个 插槽指定 具体的 name 名称 。这种 带有具体 名称的插槽 叫做“具名插槽”。

为具名插槽提供内容

在向具名插槽提供内容的时候，我们可以在一个