5.Vue2.x动态组件+插槽+自定义组件+vue项目代码规范

# 动态组件

---

动态组件，即可以动态切换显示和隐藏的组件。

1. 动态组件的使用

vue 提供了一个内置的 <component> 组件，专门用来实现动态组件的渲染。默认情况下，切换动态组件时无法保持组件的状态（即切换了组件，再切换回来，之前的数据内容会丢失，因为之前的组件销毁了）。此时可以使用 vue 内置的 <keep-alive> 组件保持动态组 件的状态。示例代码如下: 

查看代码

// 保持动态组件的状态,include是指定哪个需要保持
// 一般组件都有个 name 属性标注组件的名称，不标的话默认就是组件注册的名称
// 组件注册的名称的应用场景：用标签形式使用组件
<keep-alive include="Left,Right">
    // 通过 is 属性，动态指定要渲染的组件
    <component :is="comName"></component>
</keep-alive>

// 当前渲染的组件名称
data(){
    return { comName: 'Left' }
}

// 点击按钮，动态切换要渲染的组件名称
<button @click="comName = 'Left'">展示Left组件</button>
<button @click="comName = 'Right'">展示Right组件</button>

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

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

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

 

# 插槽Slot

---

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

可以把插槽认为是组件封装期间，为用户预留的内容的占位符。

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

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

1. 具名插槽

1.1 具名插槽的定义

组件中没有设置名称的插槽，它的默认名称是 default 。

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

查看代码

<div class="container">
    <header>
        <slot name="header"></slot>
    </main>
    <header>
        <slot name="main"></slot>
    </main>
    <footer>
        <slot name="footer"></slot>
    </footer>
</div>

1.2 为具名插槽提供内容

在向具名插槽提供内容的时候，我们需要使用 <template> 标签对内容进行包裹，并在标签内使用 v-slot 指令，提供需要放置的插槽名称。v-lot 的简写是#  。示例代码如下:

查看代码

<Article>
   // 1 将内容放在Article组件内的 title 插槽
   <template v-slot:title>
        <h1>一首诗</h1>
   </template>
   // 2 将内容放在Article组件内的 content 插槽
   <template #content>
        <div>
          <p>啊，大海，全是水。</p>
        </div>
   </template>

   // 3 将Aut组件放在Article组件内的 author 插槽
   <Aut #author></Aut>
</Article>

2. 作用域插槽

2.1 作用域插槽的定义

在封装组件的过程中，可以为预留的 <slot> 插槽绑定 props 数据，这种带有 props 数据的 <slot> 叫做“作用 域插槽”。作用域插槽和具名插槽是交集关系。示例代码如下:

<Tbody>
    // 插槽可以带数据（这些都是封装组件者提供的）
    <slot name="myslot" v-for="item in list" :user="item"></slot>
</Tbody>

2.2 提取作用域插槽对外提供的数据

可以使用 v-slot: （简写 #）的形式，接收作用域插槽对外提供的数据:

// 用 scope 接收插槽提供的信息
<template #content="scope">
    <div>
      <p>{{ scope }}</p>
    </div>
</template>

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

<template #content="{ user }">
    <div>
    // user: { name: 'zs', age: 10 }
      <p>{{ user.name }}</p>
      <p>{{ user.age }}</p>
    </div>
</template>

提醒：利用插槽方式插入组件传递数据，比内嵌组件传递数据要方便得多！！！

最后分享：Vue中组件神兵利器，插槽Slot！

 

# 自定义指令

---

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

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

• 私有自定义指令（少用）
• 全局自定义指令（常用）

1. 私有自定义指令及其使用

在每个 vue 组件中，可以在 directives 节点下声明私有自定义指令。简单的声明及使用:

查看代码

<template>
  <div class="app-container">
    // 使用自定义指令形式与内置的指令相似，也是： v-指令名称
    <p v-color>测试</p>  
</template>

<script>
export default {
  // 私有自定义指令的节点
  directives: {
    // 定义名为 color 的指令，指向一个配置对象
    color: {
      // 形参中的 el 表示当前指令所绑定到的那个 DOM 对象
      bind(el) {
        el.style.color = blue
      }
    }
  }
</script>

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

同时，在声明自定义指令时，可以通过形参中的第二个参数（官方推荐使用 binding ），来接收指令的参数值。如下：

查看代码

<template>
  <div class="app-container">
    <p v-color="'red'">测试</p>
</template>

<script>
  directives: {
    color: {
      // 用 binding 作为第二个形参，接收指令传的参数
      bind(el, binding) {
        // binding.value 即指令传过来的 'red'
        el.style.color = binding.value
      }
    } 
  }
</script>

bind 函数只调用 1 次:当指令第一次绑定到元素时调用，当 DOM 更新时 bind 函数不会被触发。

update 函数：会在每次 DOM 更新时被调用。因此往往需要这两个函数配合使用。示例如下:

查看代码

<template>
  <div class="app-container">
    <p v-color="'red'">测试</p>
</template>

<script>
  directives: {
    color: {
      // 当指令第一次被绑定到元素上的时候，会立即触发 bind 函数
      bind(el, binding) {
        el.style.color = binding.value
      },
      // 在 DOM 更新的时候，比如通过按钮切换指令的参数时，会触发 update 函数
      update(el, binding) {
        el.style.color = binding.value
      }
    }
      
      // 注：假如函数里面的业务逻辑相同，则可以合并在一起写，如下
    color(el, binding) {
      el.style.color = binding.value
    }
  }
}
</script>

2. 全局自定义指令

全局共享的自定义指令需要通过在 main.js 文件中，用 “Vue.directive()” 进行声明，示例代码如下:

查看代码

// 全局自定义指令
/* Vue.directive('color', {
  bind(el, binding) {
    el.style.color = binding.value
  },
  update(el, binding) {
    el.style.color = binding.value
  }
}) */

// 函数合并简写
Vue.directive('color', function(el, binding) {
  el.style.color = binding.value
})

 

# Vue项目代码规范

---

 在使用 vue-cli 安装Vue项目的时候，如果选择了 代码约束 选项，项目中则会多出一个代码规范的配置文件，用来定义 代码规范 约束格式的。另外，可以装插件来格式化代码从而实现自定义的代码规范。

TSLint插件：用来实现保存即自动格式化代码的。

Prettier-Code formatter：格式化插件。

上面两个插件安装后都需要配置！