自定义指令

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

  • inserted：被绑定元素插入父节点时调用的钩子函数
  • el：使用指令的那个DOM元素

全局注册：

1
2
3
4
5
6
7
Vue.directive('指令名', {
	"inserted" (el) {
		// inserted指的是当组件被插入到页面时
		// 可以对el标签，扩展额外功能
		el.focus() // 实现对元素的聚焦
	}
})

局部注册：

1
2
3
4
5
6
7
directives: {
	"指令名": {
		inserted() {
			el.focus()
		}
	}
}

使用：

1
<input v-指令名 type="text">

注意：

  • 在使用指令的时候，一定要先注册，再使用，否则会报错
  • 使用指令语法： v-指令名。如：<input type="text"  v-focus/>  
  • 注册指令时不用加v-前缀，但使用时一定要加v-前缀

获取指令值

  1. 在绑定命令时，可以通过等号获取绑定具体的参数值
  2. 通过 binding.value 可以拿到指令值，指令值修改会触发 update 函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
  <div id="app">
    <div v-color="color1">我是测试1</div>
    <div v-color="color2">我是测试2</div>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      color1: 'red',
      color2: 'green'
    }
  },
  directives: {
    color: {
      inserted(el, binding) {
        el.style.color = binding.value
      },
      update(el, binding) {
        el.style.color = binding.value
      }
    }
  }
}
</script>

插槽

作用：让组件内部的一些结果内容支持自定义

场景：当一个组件被多次使用，但是其内容不一样，不能写死，就需要插槽来自定义

语法：

  1. 组件内，需要自定义的部分，使用<slot></slot>占位
  2. 使用组件时，<组件名>自定义内容</组件名>标签内部传入结果替代slot

1682410329794.png

默认值

当没有内容传入时，需要默认值占位，可以为<slot>添加内容提供默认值

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

具名插槽

当一个组件内有多个内容需要定制时

具名插槽语法：

  1. 多个 slot 使用 name属性 区分名字

1682413391727.png

  1. template 配合 v-slot:名字 来分发对于标签

1682413411921.png

  1. v-slot:插槽名：可以简化为 #插槽名

作用域插槽

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

场景：当使用插槽传递自定义内容时，需要发回参数给父组件时

  1. 父传子，通过#插槽名传递自定义内容
  2. 子组件在slot标签内，添加属性用来传递参数，参数会被收集成一个对象
  3. 被传递回父组件的参数会以对象的形式被接收

使用步骤：

  1. 给slot标签，以添加属性的方式传值
1
<slot :id="item.id" msg="测试文本"></slot>
  1. 所有添加的属性都会被收集到一个对象中，传回父组件
1
{ id: 3, msg: "测试文本"}
  1. 在 template 中，通过 #插槽名= "obj" 接收，默认插槽名为 default
1
2
3
4
5
<MyTable :list="list">
	<template #default="obj">
		<button @click="del(obj.id)">删除</button>
	</template>
</MyTable>