动态组件&插槽&自定义指令

能够掌握keep-alive元素的基本使用，包括<keep-alive>标签、include属性；能够掌握插槽的基本使用，包括<slot>标签、具名插槽、作用域插槽、后备内容；能够知道如何自定义指令，包括私有自定义指令directives：{}和全局自定义指标Vue.directive()

---

动态组件

动态切换组件的显示和隐藏，vue提供了一个内置的<component>组件，专门用来实现动态组件的渲染，并且使用keep-alive保持状态。在默认情况下，切换动态组件时无法保持组件的状态，可以使用vue内置的<keep-alive>组件保持动态组件的状态

<template>
  <div class="app-container">
    <h1 >App 根组件</h1>
    <hr />
    <button @click="comName = 'Left'">展示 Left</button>
    <button @click="comName = 'Right'">展示 Right</button>
    <keep-alive include="Right,MyLeft">
      <component :is=" comName"></component>   //此处的，名字是注册名称
    </keep-alive>
    <!-- <div class="box"> -->
      <!-- 渲染 Left 组件和 Right 组件 -->
      <!-- 1. component 标签是 vue 内置的，作用：组件的占位符 -->
      <!-- 2. is 属性的值，表示要渲染的组件的名字 -->
      <!-- 3. is 属性的值，应该是组件在 components 节点下的注册名称 -->

      <!-- keep-alive 会把内部的组件进行缓存，而不是销毁组件 -->
      <!-- 在使用 keep-alive 的时候，可以通过 include 指定哪些组件需要被缓存； -->
      <!-- 或者，通过 exclude 属性指定哪些组件不需要被缓存；但是：不要同时使用 include 和 exclude 这两个属性 -->
      <!-- <keep-alive exclude="MyRight"> -->
        <!-- <component :is="comName"></component> -->
      <!-- </keep-alive> -->
    <!-- </div> -->
  </div>
</template>

<script>
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'

export default {
  data() {
    return {
      // comName 表示要展示的组件的名字
      comName: 'Left',
      color:'pink'
    }
  },
  components: {
    // 如果在“声明组件”的时候，没有为组件指定 name 名称，则组件的名称默认就是“注册时候的名称”
    Left,
    Right
  },

}
</script>

 keep-alive对应的生命周期：当组件被缓存时，会自动触发组件的deactivated生命周期，当组件被激活时，会自动触发组件的activated生命周期函数

keep-alive的include属性用来指定只有名称匹配的组件会被缓存，多个组件之间使用英文逗号隔开

<script>
export default {
  name: 'MyLeft',
   // 当提供了 name 属性之后，组件的名称，就是 name 属性的值
  // 对比：
  // 1. 组件的 “注册名称” 的主要应用场景是：以标签的形式，把注册好的组件，渲染和使用到页面结构之中
  // 2. 组件声明时候的 “name” 名称的主要应用场景：结合 <keep-alive> 标签实现组件缓存功能；以及在调试工具中看到组件的 name 名称
  data() {
    return {
      count: 0
    }
  },
  created() {
    console.log('Left 组件被创建了！')
  },
  destroyed() {
    console.log('Left 组件被销毁了~~~')
  },

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

插槽

插槽（Slot）是vue为组件的封装者提供的能力，允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。可以把插槽认为是组件封装期间为用户预留的内容占位符

在封装组件时，可以通过<slot>元素定义插槽，从而为用户预留内容占位符。如果在封装组件时没有预留任何<slot>插槽，则用户提供的任何自定义内容都会被丢弃。在封装组件时，可以为预留的<slot>插槽提供后备内容（默认内容），如果组件的使用者没有为插槽提供任何内容，则后备内容会生效。

具名插槽：在封装组件时需要预留多个插槽节点，则需要为每个<slot>插槽指定具体的name名称，这种具有具体名称的插槽叫做”具名插槽“，向具名插槽提供内容的时候，我们可以在一个<template>元素上使用v-slot指令，并以v-slot参数的形式提供其名称，具名插槽的简写形式为#。没有指定 name 名称的插槽， 会有隐含的名称叫做 “default”。

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

<template>
  <div class="app-container">
    <h1 v-color="color">App 根组件</h1>
    <p v-color="'red'">测试</p>

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

    <Article>
      <template #title>
        <h3>一首诗</h3>
      </template>
<!-- 默认情况下， <template #content="scope">  -->
      <template #content="{ msg, user }">    //解构赋值
        <div>
          <p>啊，大海，全是水。</p>
          <p>啊，蜈蚣，全是腿。</p>
          <p>啊，辣椒，净辣嘴。</p>
          <p>{{ msg }}</p>
          <p>{{ user.name }}</p>
        </div>
      </template>

      <template #author>
        <div>作者：彬果锅</div>
      </template>
    </Article>

    <hr />

    <div class="box" style="display: none;">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <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>
    </div>
  </div>
</template>

 对应的Article组件代码如下：

<template>
  <div class="article-container">
    <h3 v-color="'red'">Article 组件</h3>
    <!-- 文章的标题 -->
    <div class="header-box">
      <slot name="title"></slot>
    </div>

    <!-- 文章的内容 -->
    <div class="content-box">
      <!-- 在封装组件时，为预留的 <slot> 提供属性对应的值，这种用法，叫做 “作用域插槽” -->
      <slot name="content" msg="hello vue.j   s" :user="userinfo"></slot>
    </div>

    <!-- 文章的作者 -->
    <div class="footer-box">
      <slot name="author"></slot>
    </div>
  </div>
</template>

自定义指令

vue官方提供了了v-text、v-for、v-model等常用的指令，除此之外，vue还允许开发者自定义指令。自定义指令分为两类，分别是私有自定义指令和全局自定义指令。

私有自定义指令：

// 私有自定义指令的节点
  directives: {
    // 定义名为 color 的指令，指向一个配置对象
    /* color: {
      // 当指令第一次被绑定到元素上的时候，会立即触发 bind 函数
      // 形参中的 el 表示当前指令所绑定到的那个 DOM 对象
      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
      }
    } */
    color(el, binding) {
      el.style.color = binding.value
    }
  }

全局自定义指令：

// 全局自定义指令
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
})