vue05

组件进阶 - 动态组件

目标: 多个组件使用同一个挂载点，并动态切换，这就是动态组件

 component是一个vue内置组件， 组件必须要有is属性，is属性值就是要显示的组件名称

<template>
  <div>
      <button @click="comName = 'UserName'">账号密码填写</button>
      <button @click="comName = 'UserInfo'">个人信息填写</button>

      <p>下面显示注册组件-动态切换:</p>
      <div style="border: 1px solid red;">
          <component :is="comName"></component>
      </div>
  </div>
变量-承载要显示的组件名
设置挂载点<component :is="变量"></component>
点击按钮-切换comName的值为要显示的组件名
</template>
import UserName from '../components/01/UserName'
import UserInfo from '../components/01/UserInfo'
export default {
    data(){
        return {
            comName: "UserName"
        }
    },
    components: {
        UserName,
        UserInfo
    }
}

组件进阶 - 组件缓存

目标:

      组件切换会导致组件被频繁销毁和重新创建, 性能不高

语法:

      Vue内置的keep-alive组件 包起来要频繁切换的组件

使用Vue内置的keep-alive组件, 可以让包裹的组件保存在内存中不被销毁

演示1: 可以先给UserName.vue和UserInfo.vue 注册created和destroyed生命周期事件, 观察创建和销毁过程

在这里有两个生命周期：

• activated - 触发时激活

• deactivated - 失去触发时激活

export default {
  created() {
    console.log('创建')
  },
  beforeDestroy() {
    console.log('销毁')
  },
  activated() {
    //激活时触发
    console.log('激活')
  },
  deactivated() {
    //失去激活时触发
    console.log('失去激活')
  },
}

演示2: 使用keep-alive内置的vue组件, 让动态组件缓存而不是销毁

<div style="border: 1px solid red;">
    <!-- Vue内置keep-alive组件, 把包起来的组件缓存起来 -->
    <keep-alive>
        <component :is="comName"></component>
    </keep-alive>
</div>

总结: keep-alive可以提高组件的性能, 内部包裹的标签不会被销毁和重新创建, 触发激活和非激活的生命周期方法

组件进阶 - 激活和非激活

目标: 被缓存的组件不再创建和销毁, 而是激活和非激活

补充2个钩子方法名:

activated – 激活时触发

deactivated – 失去激活状态触发

组件进阶 - 组件插槽

目标: 用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容

vue提供组件插槽能力, 允许开发者在封装组件时，把不确定的部分定义为插槽

组件插槽分为三种：

1. 默认插槽
2. 具名插槽
3. 作用域插槽

语法：

1. 组件内用<slot></slot>占位

2. 使用组件时<Pannel></Pannel>夹着的地方, 传入标签替换slot

组件进阶 - 插槽默认内容

目标: 如果外面不给传, 想给个默认显示内容

语法：<slot>默认内容</slot>

使用场景： 如果传东西进来，默认的东西不会展示 ，如果你没有传东西进来，就会展示默认的东西 

<template>
  <div>
    <!-- 按钮标题 -->
    <div class="title">
      <slot name="title"></slot>
      <span class="btn" @click="isShow = !isShow">
        {{ isShow ? '收起' : '展开' }}
      </span>
    </div>
    <div v-show="isShow">
      <!-- 此处有一个插槽 -->
      <slot > 默认的东西</slot>
    </div>
    <!-- 下拉内容 -->
  </div>
</template>

<template>
  <div>
    <Pannel>
      <div>
        <h2>1小时</h2>
        <p>平明送客楚山孤。</p>
        <p>洛阳亲友如相问，</p>
        <p>一片冰心在玉壶。</p>
      </div>
    </Pannel>
    <Pannel> </Pannel>
  </div>
</template>

<script>
import Pannel from './comfive/Pannel.vue'
export default {
  // components: { User },
  components: {
    Pannel,
  },
}
</script>

组件进阶 - 具名插槽

目标: 当一个组件内有2处以上需要外部传入标签的地方

传入的标签可以分别派发给不同的slot位置

<template>
  <div>
    <!-- 按钮标题 -->
    <div class="title">
      <slot name="title"></slot>
      <span class="btn" @click="isShow = !isShow">
        {{ isShow ? "收起" : "展开" }}
      </span>
    </div>
    <!-- 下拉内容 -->
    <div class="container" v-show="isShow">
     <slot name="content"></slot>
    </div>
  </div>
</template>

<template>
  <div>
    <Pannel>
      <template v-slot:title>
        <h4>芙蓉楼送辛渐</h4>
      </template>
      <template v-slot:tiedan>
        <h2>1小时</h2>
        <p>平明送客楚山孤。</p>
        <p>洛阳亲友如相问，</p>
        <p>一片冰心在玉壶。</p>
      </template>
    </Pannel>
    <Pannel>
      <!-- slot简写 -->
      <template #title>
        <h2>beautiful</h2>
      </template>
      <template #tiedan>
        <h3>gagagaga</h3>
      </template>
    </Pannel>
    <Pannel></Pannel>
  </div>
</template>
<script>
import Pannel from "../components/04/Pannel";
export default {
  components: {
    Pannel,
  },
};
</script>

注意：

1、v-bind可以省略成 : 

     v-on: 可以省略成  @

     v-slot: 可以简化成  #

2、总结: slot的name属性起插槽名, 使用组件时, template配合#插槽名传入具体标签

组件进阶 - 作用域插槽

目标: 子组件里值, 在给插槽赋值时在父组件环境下使用

使用场景：使用插槽, 使用组件内的变量

用法：

1. 子组件, 在slot上绑定属性和子组件内的值

2. 使用组件, 传入自定义标签, 用template和v-slot="自定义变量名"

3. scope变量名自动绑定slot上所有属性和值

<template>
  <div>
    <!-- 按钮标题 -->
    <div class="title">
      <slot name="title"></slot>
      <span class="btn" @click="isShow = !isShow">
        {{ isShow ? '收起' : '展开' }}
      </span>
    </div>
    <div v-show="isShow">
      <!-- 作用域插槽 --> 
场景: 使用插槽, 使用组件内的变量
1. slot标签, 自定义属性和内变量关联
2. 使用组件, template配合v-slot="变量名"
变量名会收集slot身上属性和值形成对象
      <slot :harry='obj' na='guishi'> 默认的东西</slot>
    </div>
    <!-- 下拉内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      obj: {
        firstName: 'first',
        lastName: 'last',
      },
    }
  },
}
</script>

<template>
  <div>
    <Pannel>
      <!-- 作用域插槽 -->
      <template v-slot="scoped">
        <h3>{{ scoped.harry.firstName }}</h3>
        <h4>{{ scoped.harry.lastName }}</h4>
      </template>
    </Pannel>
  </div>
</template>

自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。 v-xxx 、html+css的复用的主要形式是组件，你需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令；

自定义指令-局部注册

只能在当前组件.vue文件中使用

 1. 创建自定义指令： 全局 / 局部
 2. 在标签上使用自定义指令  v-指令名
注意:
inserted方法 - 指令在使用此指令的元素插入到页面时候才会执行
update方法 - 指令对应数据/标签更新时, 此方法执行

<template>
  <div>
      <input type="text" v-focus>
     全局配置 
     <input type="text" v-gfocus />
     <p v-color="color">变色</p>
  </div>
</template>

<script>
// 目标: 创建 "自定义指令", 让输入框自动聚焦
export default {
    data(){
        return {
            colorStr: 'red'
        }
    },
    directives: {
        focus: {
            inserted(el){
           第一个参数就是使用此指令的dom元素
          console.log(el)
                el.focus()
            }
        }
    }
}
</script>

自定义指令--全局注册

在main.js用 Vue.directive()方法来进行注册, 以后随便哪个.vue文件里都可以直接用v- xxx自定义指令

全局注册自定义指令,所有组件都可以使用
Vue.directive('gfocus', {
  inserted(el) {
    el.focus()
  },
})

自定义指令-传值

需求: 定义color指令-传入一个颜色, 给标签设置文字颜色

<template>
  <div>
    <p v-color="color">变色</p>
  </div>
</template>

在main.js中进行注册

第二个参数包含了自定义指令的配置，value属性就是传的值
Vue.directive('color', {
  inserted(el, binding) {
    el.style.color = binding.value
  },
  update(el, binding) {
    el.style.color = binding.value
  },
})

总结: v-xxx, 自定义指令, 获取原生DOM, 自定义操作