【Vue】自定义指令、插槽

目录

自定义指令

是什么

作用

使用方法

定义

使用 

自定义指令配合绑定数据

语法

自定义指令的简写

语法

使用时机

插槽

什么是插槽

默认（匿名）插槽

​编辑插槽的默认值

具名插槽

使用方法

简写

使用示例 

作用域插槽

---

自定义指令

是什么

• 内置指令：是vue3自带的，比如：v-model、v-for、v-if....我们可以直接使用。
• 自定义指令：相对内置指令而言，我们自己编写的指令，当内置指令无法满足需求的时候，就可以自己编写的指令。

作用

封装一段公共的DOM操作的代码。

与ref属性操作DOM的区别：

1. ref是作用在单个标签上的，代码无法复用
2. 自定义指令可以把一段公共的DOM操作代码封装起来，进行复用

使用方法

定义

main.js -> app.directive('指令名',{

        mounted(el){

                //el就是指令所在的DOM元素

        }

})

示例：在main.js文件中

const app=createApp(App)

app.directive('jujiao',{
    mounted(el){
        el.focus()
    }
})

app.mount('#app')

使用 

自定义指令配合绑定数据

语法

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

2、通过binding.value可以拿到指令值，指令值修改会触发updated钩子

app.directive('color',{
     //mouted钩子只负责初次渲染，后续指令所在表达式的值变了，该函数不会执行，因此需要引入updated钩子
    mounted(el,binding){
        //el就是指令所在的DOM元素
        //binding：指令绑定的信息对象，通过binding.value获取表达式结果
        el.style.color=binding.value
    },
    updated(el,binding){
        el.style.color=binding.value
    }
})

自定义指令的简写

将上面提到指令的mounted()和updated()两个钩子进行合写，用一个函数来代替，并且这个函数会在mounted()和updated()时机都会执行。

语法

app.directive('color',(el,binding)=>{
    el.style.color=binding.value
})

使用时机

1. 当自定义指令绑定数据，那么就可以简写（简写的本质=mounted()+updated()）
2. 当自定义指令没有绑定数据，那么就采用非简写的方式。

插槽

什么是插槽

        本质就是一个占位符，今后可以给这个占位符传入想要的组件结构，从而大大提高组件的灵活性和可复用性。

默认（匿名）插槽

作用

让组件内部的一些结构支持自定义

语法

1. 在使用组件的时候，把组件写成双标签
2. 在双标签之间传入想展示的结构，从而替换占位的slot组件

子组件

App.vue 

插槽的默认值

如果未传入内容，则显示slot标签内的内容 

我是默认内容

默认值的生效规则：

1. 如果没传，就显示默认值，防止页面空白
2. 如果传入了，就会用传入的，替换掉占位的slot，从而展示实际传入的标签结构

具名插槽

一个组件内有多处结构，需要外部传入标签，进行定制，默认插槽只能定制一处内容。这是给插槽添加name属性，进行区分，添加name属性的插槽就是具名插槽。

使用方法

默认的内容

 

简写

使用示例 

根组件

子组件（插槽） 

作用域插槽

带数据的插槽，用slot占位的同时，还可以给slot绑定数据，也就是说数据来源于插槽，但是怎么展示这些数据由自定义结构决定。

接收插槽数据

这里的obj就代表对应slot标签绑定的所有数据的对象

上面是使用一个对象进行接收，我们也可以对接收的数据进行解构，直接获取指定的数据，如下：

slot绑定数据