自定义指令

基本语法 (全局&局部注册)

自定义指令：自己定义的指令, 可以封装一些 dom 操作，扩展额外功能

全局注册

//全局注册指令
Vue.directive('focus',{//inserted 会在指令所在的元素，被插入到页面中时触发inserted(el){//el就是指令所绑定的元素el.focus()}
})

 <div id="app"><h1>自定义指令</h1><input v-focus ref="inp" type="text"></div>

网页显示为：

局部注册

<template><div id="app"><h1>自定义指令</h1><input v-focus ref="inp" type="text"></div>
</template><script>export default {directives:{focus:{inserted(el){el.focus()}}}
}
</script>

指令的值

需求：实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色

语法：在绑定指令时，可以通过“等号”的形式为指令绑定具体的参数值

通过 binding.value 可以拿到指令值，指令值修改会触发 update 函数。

<template><div id="app"><h1 v-color="color1">自定义指令1</h1><h1 v-color="color2">自定义指令2</h1></div>
</template><script>
export default {data(){return{color1:'red',color2:'green'}},directives:{color:{//1.inserted提供的是元素被添加到页面中时的逻辑inserted(el,binding){el.style.color=binding.value},//2.update 指令的值修改的时候触发，提供值变化后，dom更新的逻辑update(el ,binding){el.style.color=binding.value}}}
}
</script><style></style>

网页显示为：

v-loading 指令封装

场景：实际开发过程中，发送请求需要时间，在请求的数据未回来时，页面会处于空白状态 => 用户体验不好

需求：封装一个 v-loading 指令，实现加载中的效果

分析：

1. 本质 loading 效果就是一个蒙层，盖在了盒子上

2. 数据请求中，开启loading状态，添加蒙层

3. 数据请求完毕，关闭loading状态，移除蒙层

实现：

1. 准备一个 loading 类，通过伪元素定位，设置宽高，实现蒙层

2. 开启关闭 loading 状态（添加移除蒙层），本质只需要添加移除类即可

3. 结合自定义指令的语法进行封装复用

<script>
// 安装axios =>  yarn add axios
import axios from 'axios'// 接口地址：http://hmajax.itheima.net/api/news
// 请求方式：get
export default {data () {return {list: [],isLoading: true,isLoading2: true}},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)},directives: {loading: {inserted (el, binding) {binding.value ? el.classList.add('loading') : el.classList.remove('loading')},update (el, binding) {binding.value ? el.classList.add('loading') : el.classList.remove('loading')}}}
}
</script>

插槽

默认插槽

插槽基本语法：

1. 组件内需要定制的结构部分，改用<slot></slot>占位

2. 使用组件时, <MyDialog></MyDialog>标签内部, 传入结构替换slot

后备内容（默认值）

插槽后备内容：封装组件时，可以为预留的 ` <slot> ` 插槽提供后备内容（默认内容）。

语法: 在 <slot> 标签内，放置内容, 作为默认显示内容

效果:

外部使用组件时，不传东西，则slot会显示后备内容

外部使用组件时，传东西了，则slot整体会被换掉

具名插槽

需求：一个组件内有多处结构，需要外部传入标签，进行定制

默认插槽：一个的定制位置

具名插槽语法:

3. v-slot:插槽名可以简化成 #插槽名

作用域插槽

作用域插槽: 定义 slot 插槽的同时, 是可以传值的。给插槽上可以绑定数据，将来使用组件时可以用。

场景：封装表格组件

1. 父传子，动态渲染表格内容

2. 利用默认插槽，定制操作列

3. 删除或查看都需要用到当前项的 id ，属于组件内部的数据

通过作用域插槽传值绑定，进而使用