别再说自己不会了，Vue自定义指令原来这么简单，2024年前端社招面试题

export default {

}

views/06_UseTable.vue - 准备数据, 传入给MyTable.vue组件里循环使用

list: [

{

name: “小传同学”,

age: 18,

headImgUrl:

“http://yun.itheima.com/Upload/./Images/20210303/603f2d2153241.jpg”,

},

{

name: “小黑同学”,

age: 25,

headImgUrl:

“http://yun.itheima.com/Upload/./Images/20210304/6040b101a18ef.jpg”,

},

{

name: “智慧同学”,

age: 21,

headImgUrl:

“http://yun.itheima.com/Upload/./Images/20210302/603e0142e535f.jpg”,

},

],

例子: 我想要给td内显示图片, 需要传入自定义的img标签

正确做法:

​ 在MyTable.vue的td中准备占位, 但是外面需要把图片地址赋予给src属性,所以在slot上把obj数据绑定

components/06/MyTable.vue - 正确代码

序号 姓名 年龄 头像 { { index + 1 }} { { obj.name }} { { obj.age }}

{ { obj.headImgUrl}}

​ 在UseTable使用MyTable的时候, template上v-slot绑定变量, 传入img组件设置图片地址

{ { scope.row.headImgUrl }}

总结: 插槽可以自定义标签, 作用域插槽可以把组件内的值取出来自定义内容

2. 自定义指令

---

自定义指令文档

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。 v-xxx

html+css的复用的主要形式是组件

你需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令

2.0 自定义指令-注册

目标: 获取标签, 扩展额外的功能

局部注册和使用

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

全局注册

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

// 全局指令 - 到处"直接"使用

Vue.directive(“gfocus”, {

inserted(el) {

el.focus() // 触发标签的事件方法

}

})

总结: 全局注册自定义指令, 哪里都能用, 局部注册, 只能在当前vue文件里用

2.1 自定义指令-传值

目标: 使用自定义指令, 传入一个值

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

main.js定义处修改一下

// 目标: 自定义指令传值

Vue.directive(‘color’, {

inserted(el, binding) {