Vue之动态组件(二)

Vue之第二篇章学习（动态组件、插槽、自定义指令）

1.动态组件

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

我们之前可以使用v-if来显示、隐藏组件，但是这样代码臃肿，冗余。我们这里用到Vue的内置组件《component》

示例代码：

<template>
  <div id="app">
   <component :is="comName"></component>
  </div>
</template>

<script>
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'
export default {
  name: 'App',
  data(){
    return {
      comName: 'Left'
    }
  },
  components: {
   Left,
   Right
  }
}
</script>

利用Vue内置组件《component》并且绑定is属性，通过绑定is的属性值为变量，来动态切换组件。（比如app下面的“首页”、“我的”切换）

1.1《keep-alive》

但是使用上面《component》，我们发现如果切换回原来的组件的时候，组件会被重新创建，并不会缓存之前的状态。

示例代码：

<template>
  <div id="app">
    <keep-alive>
      <component :is="comName"></component>
    </keep-alive>
  </div>
</template>

<script>
import Left from "@/components/Left.vue";
import Right from "@/components/Right.vue";
export default {
  name: "App",
  data() {
    return {
      comName: "Left",
    };
  },
  components: {
    Left,
    Right,
  },
};
</script>

默认被包裹在keep-alive中的所有组件会被缓存，就可以保持之前的状态。

1.2《keep-alive》的生命周期

1.activated：页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
2.deactivated ：页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated

跟Vue组件的生命周期函数一样，定义在兄弟节点。

1.3《keep-alive》的include和exclude属性

注意：这两个属性不能同时使用。

<keep-alive include="Left,Right">
    <component :is="comName"></component>
</keep-alive>

include：指的是允许缓存的组件（多个组件之间使用逗号，隔开）

exclude：指的是不被缓存的组件（多个组件之间使用逗号，隔开）

2.插槽

插槽在外面实际开发过程中并不常见。

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

在我们之前自定义组件中，并没有在组件标签中书写内容。最简单的插槽就是在组件中声明插槽给调用者使用。

子组件：

<template>
  <div class="left-container">
    <h3>Left 组件h3>
    
    <slot>slot>
  div>
template>

<script>
export default {}
script>

调用者：

<template>
  <div class="app-container">
    <h1>App 根组件h1>
    <hr />

    <div class="box">
      
      <Left>
        <h4>这是插槽代替的位置h4>
      Left>
    div>
  div>
template>

<script>
import Left from '@/components/Left.vue'
export default {
  name: 'App',
  components: {
    Left
  }
}
script>

2.1具名插槽

就是具有名字的插槽，父组件需要根据不同的名字去渲染指定的插槽。子组件就需要使用v-slot指定插槽名字。

子组件：

<template>
  <div class="left-container">
    <h3>Left 组件h3>
    <slot name="title">slot>
    <slot name="content">slot>
  div>
template>

父组件：

<template>
  <div class="app-container">
    <h1>App 根组件h1>
    <hr />

    <div class="box">
      
      <Left>
        <template v-slot:title>
          <h4>这是插槽代替的位置h4>
        template>
      Left>
    div>
  div>
template>

使用v-slot：绑定插槽的名字。

注意：

• v-slot：可以简写成#
• v-slot：只能作为在template标签或者自定义组件标签中的属性

2.2插槽的后备内容

其实就是在定义插槽的时候就定义里面的默认值，就算父组件不使用，也会被渲染出来。

<template>
  <div class="left-container">
    <h3>Left 组件h3>
      <slot name="title"><h1>title的默认内容h1>slot>
    <slot name="content"><h1>content的默认内容h1>slot>
  div>
template>

2.3作用域插槽

说白了就是在子组件的插槽中自定义一些属性和属性值，在父组件使用时，能够直接获取到属性和属性值，会以键值对的方式展现出来。

子组件：

<slot name="title" msg="hello" value="zs">slot>

父组件：

<Left>
    <template v-slot:title='obj'>
        <h4>这是插槽代替的位置{{obj}}h4>
    template>
Left>

obj的内容就是{ “msg”: “hello”, “value”: “zs” }

3.自定义指令

官方提供了v-if,v-for,v-html的相关指令，当然也允许用户自定义指令。

自定义指令分为两种：

• 私有自定义指令：只能当前组件使用
• 全局自定义指令：全部组件都能使用

私有自定义指令：

<template>
  <div id="app">
    <p v-color="'green'">你好p>
  div>
template>

<script>
export default {
  name: 'App',
  directives: {
    color: {
      bind(el,binding){
        el.style.color = binding.value
      }
    }
  }
}
script>

自定义指令定义在directives节点下，color为自定义指令的配置对象

Vue 提供了自定义指令的5个钩子函数：

• • bind：指令第一次绑定到元素时调用，只执行一次。在这里可以进行一次性的初始化设置。
  • inserted：被绑定的元素，插入到父节点的 DOM 中时调用（仅保证父节点存在）。
  • update：组件更新时调用。
  • componentUpdated：组件与子组件更新时调用。
  • unbind：指令与元素解绑时调用，只执行一次。

el:表示当前Dom对象

binding：可以接受传进来的值。

全局自定义指令

Vue.directive('bgcolor', {
    bind: function(el, binding, vnode) {
        el.style.backgroundColor = "#" + Math.random().toString(16).slice(2,8);
    }
})

**注意：**在定义的时候，指令的名称前面不需要加 v- 前缀，在调用的时候，必须在指定的名称前加上 v-前缀来进行调用