09-Vue:动态组件、自定义指令

1.动态组件

多个组件使用同一个挂载点，并动态切换，就是动态组件；
vue内置component组件，配合is属性，设置要显示的组件名字

需求：完成一个注册功能页面，2个按钮切换，一个填写注册信息一个填写用户信息
1.data中定义变量来存储显示的组件名；
2.设置挂载点，使用is属性来设置要显示那个组件；
3.点击按钮-修改变量的值 切换组件名；

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

    <div style="border: 1px solid #333">
      <component :is="comname"></component>
    </div>
  </div>
</template>

<script>
import UserName from "@/components/UserName.vue";
import UserInfo from "@/components/UserInfo.vue";
export default {
  components: { UserName, UserInfo },
  data() {
    return {
      comname: "UserName", //用来存储组件名
    };
  },
};
</script>

<style scoped>
</style>

2.组件缓存

组件切换回导致组件被频繁的销毁和创建，性能不高；
使用vue内置的keep-alive组件，可以让包裹的组件保存在内存中不被销毁

补充生命周期
activated 激活； deactived 失去激活状态
总结：keep-alive可以提高组件的性能，内部包裹的标签不会被销毁和重新创建，触发激活和非激活的生命周期方法

3.组件插槽

实现组件的内容分发，通过slot标签，可以接收到写在组件标签内的内容；
vue提供组件插槽的能力，允许开发者在封装组件时，把不确定的部分定义为插槽；

插槽默认内容:
如果外面不给传，想给个默认显示内容

<slot>默认内容</slot>

4.具名插槽

一个组件内有2处以上需要传入标签的地方;
传入的标签可以分别 派发给不同的slot位置;
使用template标签，template不会渲染到页面上，v-slot

5.作用域插槽

子组件里的值，在给插槽赋值时在父组件环境下使用;
1.子组件，在slot上绑定属性和组件内的值;
2.使用组件，传入自定义标签，使用template和v-slot:名字=”自定义变量名“;
3.scope变量名自动绑定slot上所有的属性和值;

封装组件
封装一个表格组件，在表格组件内循环产生单元格
1.准备MyTable.vue组件- 内置表格，传入数组循环铺设页面，把对象每个内容显示单元格里;
2.准备UserTable组件 准备数据传入给MyTable.vue使用;
3.在MyTable.vue中准备占位slot，外面需要把图片地址赋予给src属性，所以在slot上把obj数据绑定;

6.自定义指令

https://cn.vuejs.org/v2/guide/custom-directive.html
vue除了内置的指令(v-model，v-for…),vue也允许注册自定义指令， v-xxxx;
你需要对普通的Dom元素进行底层操作，就会用到自定义指令;
注册
获取标签，扩展额外的功能
局部注册和使用
UseDirective.vue 只能在当前组件中使用;

<template>
  <div>
    <input type="text" v-focus />
  </div>
</template>

<script>
// 创建自定义指令
// inserted指令所在标签被插入到网页上触发（一次）
export default {
  data() {
    return {
      colorStr: "red",
    };
  },
  directives: {
    focus: {
      inserted(e) {
        console.log(e, 9);
        e.focus();
      },
    },
  },
};
</script>

<style scoped>
</style>

全局注册
main.js中用Vue.directive方法来注册，任何一个组件里都可以使用
// 全局指令
Vue.directive(‘gfocus’, {
inserted (e) {
e.focus()
}
})

自定义指令传参
使用自定义指令 传入一个值;
需求:定义color指令，传入一个颜色，给标签设置文字颜色

<template>
  <div>
    <input type="text" v-focus />
    <p v-color="colorStr" @click="colorStr = 'blue'">修改文字颜色</p>
  </div>
</template>

<script>
// 创建自定义指令
// inserted指令所在标签被插入到网页上触发（一次）
export default {
  data() {
    return {
      colorStr: "red",
    };
  },
  directives: {
    focus: {
      inserted(e) {
        console.log(e, 9);
        e.focus();
      },
    },
    color: {
      inserted(e, bindling) {
        e.style.color = bindling.value;
      },
      update(e, bindling) {
        e.style.color = bindling.value;
      },
    },
  },
};
</script>

<style scoped>
</style>