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

  　　动态组件

 　  1.1动态组件指的是动态切换组件的显示和隐藏

　　1.2vue提供了一个内置的标签<componet>组件，用来实现动态组件的渲染代码，其中keep-alive标签的作用是保持动态组件的状态，

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

       1.3当提供了name属性之后组件的名称就是name属性的值，对比：（1）组件的注册名称主要应用场景是以标签的形式，把注册好的组件，渲染到页面结构中

　　　（2）组件声时候的name名称主要应用场景：结合标签<keep-alive> 标签实现组件缓存功能

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr/>
    <button @click="comName='Left'">展示left</button>
    <button @click=" comName='Right'">展示Right</button>
    <div class="box">
      <!-- 可以把内部的组件进行缓存，保证组件不会被销毁掉 -->
      <!--  include="Left"属性只要在include属性中都会被缓存-->
      <keep-alive include="Left,Right">
           <!-- comNameponent标签占位符 动态绑定is属性的指定值 -->
        <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",
    };
  },
  components: {
    Left,
    Right
  },
  //当组件第一次被创建的时候，会执行c'reated生命周期和activated的生命周期
  //当组件被激活的时候，只会出发activated生命周期不会触发created，因为组件没有被创建
  activated(){

  },
  deactivated(){

  }
};
</script>

  　　插槽

 　1.1什么是插槽：是vue为组件的封装者提供的能力，把不确定的、希望由用户指定的部分定义为插槽，普通的来讲就是为用户预留下来的占位符

App.vue

<template>
  <div class="app-container">
    <h1 v-color="color">App 根组件</h1>
    <hr />
    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <!-- 默认情况下，使用组件的时候，提供的内容都会被填充到名字为default的插槽之中 -->
      <Left>
        <!-- 如果需要把内容填充到指定名称的插槽中，需要使用v-slot这个指令 -->
        <!-- v-solt指令不能直接使用在元素上，必须使用在template标签上，
        template他是一个虚拟的标签，只起到包裹的作用 -->
        <!-- v-solt的简写是# -->
        <template #default>
          <!-- <p>这是在left组件的内容区域，声明的p标签</p> -->
        </template>
      </Left>
    </div>
  </div>
</template>

<script>
import Left from "@/components/Left.vue";
import Article from "@/components/Article.vue";

export default {
  components: {
    Left,
  },
};
</script>


Left.vue 

<template>

  <div class="left-container">

    <h3>Left 组件</h3>

    <hr />

    <!-- 声明一个插槽区域 -->

    <!-- vue 官方规定：每一个 slot 插槽，都要有一个 name 名称 -->

    <!-- 如果省略了 slot 的 name 属性，则有一个默认名称叫做 default -->

    <slot name="default">

      <h6>这是 default 插槽的后备内容</h6>

    </slot>

  </div>

</template>

　　  

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

　　1.1私有自定义指令：可以在 directives 节点下声明私有自定义指令

      

<script>
import Left from "@/components/Left.vue";
import Article from "@/components/Article.vue";

export default {
  data() {
    return {
      color: "blue",
    };
  },
  components: {
    Left,
    Article,
  },
  //私有自定义命令节点
  directives: {
    // 定义名称为color自定义指令，指向一个配置对象
    color: {
      //当指令第一次被绑定到元素上的时候触发bind函数
      //el形参中的dom元素的实例对象
      bind(el, binding) {
        el.style.color = binding.value;
      },
      update(el, binding) {
        el.style.color = binding.value;
      },
    },
  },
  

};
</script>

 

　　1.2全局自定义指令：全局共享的自定义指令需要通过“Vue.directive()”进行声明

　　

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 全局自定义指令
/* 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.filter('过滤器的名字', function () {  })

new Vue({
  render: h => h(App)
}).$mount('#app')