一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第24天，点击查看活动详情。
大家好,我是大帅子,今天给大家讲一下vue的插槽跟自定义指定,下面我们直接开始吧
插槽
作用
vue提供组件插槽能力, 允许开发者在封装组件时，把不确定的部分定义为插槽
用法
- 先在组件内用slot占位
- 使用组件时, 传入具体标签插入
<slot>默认内容</slot>
<template>
<h4>大帅子最帅</h4>
</template>
具名插槽
v-slot可以简化成#使用
当一个组件内有2处以上需要外部传入标签的地方,我们需要加入name
<slot name="title"></slot>
<template v-slot:title>
<h4>大帅子最帅</h4>
</template>
作用域插槽
口诀:
- 子组件, 在slot上绑定属性和子组件内的值
- 使用组件, 传入自定义标签, 用template和v-slot="自定义变量名"
- scope变量名自动绑定slot上所有属性和值
使用组件插槽技术时, 需要用到子组件内变量
<template>
<div>
<slot :row="defaultObj">{{ defaultObj.defaultOne }}</slot>
</div>
</template>
<script>
// 目标: 作用域插槽
// 场景: 使用插槽, 使用组件内的变量
// 1. slot标签, 自定义属性和内变量关联
// 2. 使用组件, template配合v-slot="变量名"
// 变量名会收集slot身上属性和值形成对象
export default {
data() {
return {
isShow: false,
defaultObj: {
defaultOne: "大帅子",
defaultTwo: "小帅子"
}
}
}
}
</script>
<template>
<div>
<Pannel>
<!-- 需求: 插槽时, 使用组件内变量 -->
<!-- scope变量: {row: defaultObj} -->
<template v-slot="scope">
<p>{{ scope.row.defaultTwo }}</p>
</template>
</Pannel>
</div>
</template>
<script>
import Pannel from "../components/Pannel";
export default {
components: {
Pannel,
},
};
</script>
自定义指令
这里我们分为全局自定义指令跟局部自定义指令
局部自定义指令
<template>
<div>
<input v-focus type="text" />
</div>
</template>
<script>
export default {
name: "Dsz04",
data() {
return {};
},
directives: {
focus: {
inserted(el) {
el.focus();
}
}
}
</script>
全局自定义指令
- 在
main.js里面
// 全局自定义指定 , 自定义指令其实很简单,
// 1. 创建
// 2. 使用
// Vue.directive()
// 参数一 : 指令名
// 参数二 : 对象, 指令的钩子函数在对象中
// el : 会拿到绑定的标签
Vue.directive('focus', {
inserted(el) {
console.log(el, 55);
el.focus()
}
})
2.全局都可以使用
<template>
<div>
<input v-focus type="text" />
</div>
</template>
<script>
export default {
name: "Dsz04",
data() {
return {};
},
}
</script>
好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏,
🐣---->🦅 还需努力!大家一起进步!!!
