Vue2五、自定义指令，全局局部注册、指令的值 ，插槽--默认插槽，具名插槽 ( 作用域插槽)

一、自定义指令

使用步骤

1. 注册 (全局注册 或 局部注册) ，在 inserted 钩子函数中，配置指令dom逻辑

2. 标签上 v-指令名 使用

1、自定义指令（全局）

 Vue.directive("指令名"，{   指令的配置项  inserted ()  { }    }

2、自定义指令（局部）

directives: { "指令名": { inserted (  ) {    可以对 el 标签，扩展额外功能 el.focus( )       } } }

3、指令的值

 指令值的语法：

① v-指令名 = "指令值" 可以绑定指令的值 ② 通过 binding.value 拿到指令的值

③ 通过 update 钩子 ，指令的值被修改的时候自动触发update钩子

、

参数1:当前加了指令的标签。参数2:获取指令值，binding.value

<div v-color="color">我是内容</div>

directives: {//color自定义指令名
//参数1:当前加了指令的标签
//参数2:获取指令值，binding.value
----------------------------------------------------------
color: {
//------------------------------------------加载在标签上-----
inserted (el, binding) {
el.style.color = binding.value
},
//指令的值被修改的时候自动触发update钩子-----------改值--------
update (el, binding) {
el.style.color = binding.value
}
}
}

v-loading指令封装-简单练

App.vue

<template><div id="app"><h1 v-color="color1">自定义指令</h1><h1 v-color="color2">自定义指令</h1></div>
</template><script>
export default {
data(){return{color1:'red',color2:'blue',}
},
//自定义指令的值
directives:{color:{// 指令加载在标签时//参数1:加自定义指令的标签（当前加了指令的便签）,参数2:获取指令值，binding.valueinserted(el,binding){console.log(el,binding)// <h1>自定义指令</h1>  redel.style.color=binding.value},// 指令的值被修改的时候自动触发update钩子update(el,binding){el.style.color=binding.value}}
}
}
</script>
<style>
</style>

例：v-loading加载中...

核心思路：

(1) 准备类名 loading，通过伪元素提供遮罩层

(2) 添加或移除类名，实现loading蒙层的添加移除

(3) 利用指令语法，封装 v-loading 通用指令

inserted 钩子中， binding.value 判断指令的值， 设置默认状态

update 钩子中， binding.value 判断指令的值， 更新类名状态

<template><div class="box" v-loading="isLoading">//----------------------使用自定义命令------<ul><li v-for="item in list" :key="item.id" class="news"><div class="left"><div class="title">{{ item.title }}</div><div class="info"><span>{{ item.source }}</span><span>{{ item.time }}</span></div></div><div class="right"><img :src="item.img" alt=""></div></li></ul></div>
</template>
<script>
// 用添加删除类名loading的方式控制是否加载 → 布尔数据控制添加删除类 → 指令值 默认是true 请求回数据false
// 指令要修改值 → 指令得有值 → 2个钩子都要写----// 安装axios =>  yarn add axios
import axios from 'axios'
// 接口地址：http://hmajax.itheima.net/api/news
// 请求方式：get
export default {data () {return {list: [],isLoading: true//----------------------------默认刚打开页面是加载中------}},//------------------------------------封装自定义指令----------------------directives: {loading: {inserted (el, binding) {// isLoading值为true 添加类名，否则删除类名// this.isLoading ? el.classList.add('loading') : el.classList.remove('loading')binding.value ? el.classList.add('loading') : el.classList.remove('loading')},//值被修改时---------------------等请求回数据时，移除加载中图片的显示（）update (el, binding) {binding.value ? el.classList.add('loading') : el.classList.remove('loading')}}},async created () {// 1. 发送请求获取数据const res = await axios.get('http://hmajax.itheima.net/api/news')setTimeout(() => {// 2. 更新到 list 中，用于页面渲染 v-forthis.list = res.data.datathis.isLoading = false}, 2000)}
}
</script><style>
/* 通过css添加一个伪元素 → 假的标签 */
.loading::before {/* 必填属性 */content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;/* center 一个center表示背景图位置 水平和垂直都居中 */background: #fff url(./loading.gif) no-repeat center;
}
.box {width: 800px;min-height: 500px;border: 3px solid orange;border-radius: 5px;position: relative;
}
.news {display: flex;height: 120px;width: 600px;margin: 0 auto;padding: 20px 0;cursor: pointer;
}
.news .left {flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding-right: 10px;
}
.news .left .title {font-size: 20px;
}
.news .left .info {color: #999999;
}
.news .left .info span {margin-right: 20px;
}
.news .right {width: 160px;height: 120px;
}
.news .right img {width: 100%;height: 100%;object-fit: cover;
}
</style>

二、插槽

作用：让组件内部的一些 结构 支持 自定义。只有两种插槽（默认+具名）

没有名字的（默认插槽），有名字的（具名插槽）name="xxx"

当组件内某一部分结构不确定--------用插槽 slot 占位封装

1：默认插槽

后备内容 -----当使用的组件     并未传入具体标签或内容时       被使用

2：具名插槽 

具名插槽语法:

1. 多个slot插槽用name区分。

2. template配合v-slot: 插槽名 (可以简化成 #插槽名 )名字来对应不同的name

3 ：插槽 - 作用域插槽

作用域插槽：传值的。给 插槽 上可以 绑定数据，将来 使用组件时可以用。