文章目录
- 自定义指令
- 1.指令介绍
- 2.自定义指令
- 3.自定义指令语法
- 4.指令中的配置项
- 自定义指令-指令的值
- 1.使用效果
- 2.语法
- 插槽-默认插槽
- 1.作用
- 2.用处
- 4.插槽的基本语法
- 插槽-具名插槽
- 1.作用
- 2.具名插槽语法
- 3.v-slot的简写
- 插槽总结
- 1.插槽分类
- 2.作用
- 3.场景
- 4.使用步骤
自定义指令
1.指令介绍
- 内置指令：v-html、v-if、v-bind、v-on… 这都是Vue内置的一些指令，可以直接使用
- 自定义指令：同时Vue也支持让开发者，自己注册一些指令。这些指令被称为自定义指令
每个指令都有自己各自独立的功能
2.自定义指令
概念：自己定义的指令，可以封装一些DOM操作，扩展额外的功能
3.自定义指令语法
- 全局注册
//在main.js中
Vue.directive('指令名', {"inserted" (el) {// 可以对 el 标签，扩展额外功能el.focus()}
})
- 局部注册
//在Vue组件的配置项中
directives: {"指令名": {inserted () {// 可以对 el 标签，扩展额外功能el.focus()}}
}
- 使用指令
注意：在使用指令的时候，一定要先注册，再使用，否则会报错使用指令语法： v-指令名。如：
注册指令时不用加v-前缀，但使用时一定要加v-前缀
4.指令中的配置项
inserted:被绑定元素插入父节点时调用的钩子函数
el：使用指令的那个DOM元素
自定义指令-指令的值
1.使用效果
实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色
2.语法
1.在绑定指令时，可以通过“等号”的形式为指令 绑定 具体的参数值
<div v-color="color">我是内容</div>
2.通过 binding.value 可以拿到指令值，指令值修改会 触发 update 函数
示例:
<template><div><h1 v-color="color1">指令的值1测试</h1><h1 v-color="color2">指令的值2测试</h1></div>
</template><script>
export default {data () {return {color1:'red',color2:'blue'}},directives: {color:{//inserted提供的是元素被添加到页面时的逻辑inserted(el,binding){el.style.color=binding.value},//update提供的是元素被更新时的逻辑update(el,binding){el.style.color=binding.value}}}
}
</script><style></style>
插槽-默认插槽
1.作用
让组件内部的一些 结构 支持 **自定义，**将需要多次显示的对话框,封装成一个组件
2.用处
组件的内容部分，不写死，使用的时候可以自定义。传什么就显示什么
4.插槽的基本语法
- 组件内需要定制的结构部分，改用****占位，solt里可以填写默认内容（不传入内容时就显示）
- 使用组件时, ****标签内部, 传入结构替换slot
- 给插槽传入内容时，可以传入纯文本、html标签、组件
插槽-具名插槽
1.作用
一个组件内有多处结构，需要外部传入标签，进行定制多处结构
2.具名插槽语法
- 多个slot使用name属性区分名字
- template配合v-slot:名字来分发对应标签
3.v-slot的简写
v-slot写起来太长，vue给我们提供一个简单写法 v-slot —> #
<template><div><MyDialog><template v-slot:head><div>我是大标题</div></template><template v-slot:count><div>我是内容</div></template><template v-slot:button><div><button>按钮</button></div></template></MyDialog></div>
</template><script>
import MyDialog from './components/MyDialog.vue'
export default {data () {return {}},components: {MyDialog}
}
</script><style>
body {background-color: #b3b3b3;
}
</style>
<template><div class="dialog"><div class="dialog-header"><slot name="head"></slot></div><div class="dialog-content"><slot name="count"></slot></div><div class="dialog-footer" ><slot name="button"></slot></div></div>
</template><script>
export default {data() {return {}},
}
</script><style scoped>
* {margin: 0;padding: 0;
}
.dialog {width: 470px;height: 230px;padding: 0 25px;background-color: #ffffff;margin: 40px auto;border-radius: 5px;
}
.dialog-header {height: 70px;line-height: 70px;font-size: 20px;border-bottom: 1px solid #ccc;position: relative;
}
.dialog-header .close {position: absolute;right: 0px;top: 0px;cursor: pointer;
}
.dialog-content {height: 80px;font-size: 18px;padding: 15px 0;
}
.dialog-footer {display: flex;justify-content: flex-end;
}
.dialog-footer button {width: 65px;height: 35px;background-color: #ffffff;border: 1px solid #e1e3e9;cursor: pointer;outline: none;margin-left: 10px;border-radius: 3px;
}
.dialog-footer button:last-child {background-color: #007acc;color: #fff;
}
</style>
插槽总结
1.插槽分类
- 默认插槽
- 具名插槽
插槽只有两种，作用域插槽不属于插槽的一种分类
2.作用
定义slot 插槽的同时, 是可以传值的。给 插槽 上可以 绑定数据，将来 使用组件时可以用
3.场景
封装表格组件
4.使用步骤
给 slot 标签, 以 添加属性的方式传值
所有添加的属性, 都会被收集到一个对象中
- { id: 3, msg: ‘测试文本’ }
- 在template中, 通过
#插槽名= "obj"接收，默认插槽名为 default
<MyTable :list="list"><template #default="obj"><button @click="del(obj.id)">删除</button></template>
</MyTable>
