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

目录

动态组件

如何实现动态组件渲染

使用 keep-alive 保持状态

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

keep-alive 的 include 属性和exclude属性 

插槽

插槽的基础用法

具名插槽

作用域插槽

自定义指令

自定义指令的分类

私有自定义指令

全局自定义指令

了解 eslint 插件的 配置

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

---

动态组件

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

如何实现动态组件渲染

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

 <!-- 1. component 标签是 vue 内置的，作用：组件的占位符 -->
 <!-- 2. is 属性的值，表示要渲染的组件的名字 -->
 <!-- 3. is 属性的值，应该是组件在 components 节点下的注册名称 -->


 <button @click="comName = 'Left'">展示 Left</button>
 <button @click="comName = 'Right'">展示 Right</button>


<component :is="comName"></component>

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

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

使用 keep-alive 保持状态

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

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

<keep-alive>
        <component :is="comName"></component>
</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” 名称  就用声明名称 

<keep-alive include="名称"> 
        <component :is="comName"></component>
      </keep-alive>

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

<keep-alive exclude="Left">
        <component :is="comName"></component>
      </keep-alive>

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

对比：

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

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

插槽

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

插槽的基础用法

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

组件中
<!-- 声明一个插槽区域 -->
    <!-- vue 官方规定：每一个 slot 插槽，都要有一个 name 名称 -->
    <!-- 如果省略了 slot 的 name 属性，则有一个默认名称叫做 default -->

<slot  name="default"></slot>

<Left>
 <!-- 默认情况下，在使用组件的时候，提供的内容都会被填充到名字为 default 的插槽之中 -->
        <!-- 1. 如果要把内容填充到指定名称的插槽中，需要使用 v-slot: 这个指令 -->
        <!-- 2. v-slot: 后面要跟上插槽的名字 -->
        <!-- 3. v-slot: 指令不能直接用在元素身上，必须用在 template 标签上 -->
        <!-- 4. template 这个标签，它是一个虚拟的标签，只起到包裹性质的作用，但是，不会被渲染为任何实质性的 html 元素 -->
        <!-- 5. v-slot: 指令的简写形式是 # -->

<template #default>
          <p>这是在 Left 组件的内容区域，声明的 p 标签</p>
        </template>
</Left>

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

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

后备内容

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

具名插槽

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

 <slot name="title"></slot>

为具名插槽提供内容

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

 <template #title>
        <h3>一首诗</h3>
      </template>

作用域插槽

在封装组件的过程中，可以为预留的 <slot> 插槽绑定 props 数据，这种 带有 props 数据的 <slot> 叫做“ 作用 域插槽 ” 

<slot name="content" msg="hello vue.js"></slot>

使用 v-slot: 的形式，接收作用域插槽对外提供的数据

作用域插槽对外提供的数据对象，可以使用 解构赋值 简化数据的接收过程

 <template #content="{ msg, user }">

自定义指令

vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。

自定义指令的分类

vue 中的自定义指令分为两类，分别是：

•  私有自定义指令
•  全局自定义指令

私有自定义指令

在每个 vue 组件中，可以在 directives 节点下声明私有自定义指令。示例代码如下：

directives: {
    // 定义名为 color 的指令，指向一个配置对象
    color: {
      // 当指令第一次被绑定到元素上的时候，会立即触发 bind 函数
      // 形参中的 el 表示当前指令所绑定到的那个 DOM 对象
      bind(el) {
        console.log('触发了 v-color 的 bind 函数')
        el.style.color = 'red'
      }
}

在使用自定义指令时，需要加上 v- 前缀

为自定义指令 动态绑定参数值

在 template 结构中 使用自定义指令 时，可以通过等号（ = ）的方式，为当前指令 动态绑定参数值 ：

<h1 v-color="color">App 根组件</h1>


data() {
    return {
      color: 'blue'
    }
  }

通过 binding 获取指令的参数值

directives: {
    color: {
      bind(el, binding) {
        console.log('触发了 v-color 的 bind 函数')
        el.style.color = binding.value
      },

update 函数

bind 函数 只调用 1 次 ：当指令第一次绑定到元素时调用， 当 DOM 更新时 bind 函数不会被触发 。 update 函 数会在 每次 DOM 更新时 被调用。示例代码如下：

<button @click="color = 'green'">改变 color 的颜色值</button>

 bind(el, binding) {
        console.log('触发了 v-color 的 bind 函数')
        el.style.color = binding.value
      },
      // 在 DOM 更新的时候，会触发 update 函数
      update(el, binding) {
        console.log('触发了 v-color 的 update 函数')
        el.style.color = binding.value
      }

函数简写

如果 bind  和 update 函数中的 逻辑完全相同 ，则 对象格式 的自定义指令可以简写成 函数格式 ：

 color(el, binding) {
      el.style.color = binding.value
    }

全局自定义指令

全局共享的自定义指令需要通过“Vue.directive()”进行声明，示例代码如下：

Vue.directive('color', function(el, binding) {
  el.style.color = binding.value
})

了解 eslint 插件的 配置

核心概念 - ESLint - 插件化的 JavaScript 代码检查工具

ESLint 是一个可配置的 JavaScript 检查器。它可以帮助你发现并修复 JavaScript 代码中的问题。问题可以指潜在的运行时漏洞、未使用最佳实践、风格问题等。

项目创建 

eslint插件的 配置

    // ESLint 插件的配置
    "editor.codeActionsOnSave":{
        "source.fixAll": true,
    },

安装Prettier - Code formatter 

配置

   "prettier.configPath": "C:\\Users\\自己的用户名\\.prettierrc",
   "eslint.alwaysShowStatus": true,
   "prettier.trailingComma": "none",
   "prettier.semi": false,
   // 每行文字个数超出此限制将会被迫换行
   "prettier.printWidth": 300,
   // 使用单引号替换双引号
   "prettier.singleQuote": true,
   "prettier.arrowParens": "avoid",
   // 设置 .vue 文件中，HTML代码的格式化插件
   "vetur.format.defaultFormatter.html": "js-beautify-html",
   "vetur.ignoreProjectWarning": true,
   "vetur.format.defaultFormatterOptions": {
       "js-beautify-html": {
           "wrap_attributes": false
       },
       "prettier": {
           "printWidth": 300,
           "trailingComma": "none",
           "semi": false,
           "singleQuote": true,
           "arrowParens": "avoid"
       }
   }, 

在C:\\Users\\自己的用户名\新建 .prettierrc 文件

{"semi": false, "singleQuote": true, "printWidth": 300, "trailingComma": "none"}

右键点击“使用...格式化文档”将Prettier - Code formatter配置为默认格式化程序

安装完插件后 新建组件遵循驼峰命名

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

安装完插件后  安装axios可能会报错，所以安装时的命令时 ： nnpm i axios --force -S

把axios 挂载到veu的原型上 

在mian.js中 

import axios from 'axios'


Vue.prototype.axios = axios

this.axios.get('请求url')

配置请求路径

//全局配置
axios.defaults.baseURL = '请求根路径'

不利于API接口的复用