首页 > 其他分享 >vue学习day09-自定义指令、插槽

vue学习day09-自定义指令、插槽

时间:2024-07-14 22:31:05浏览次数:14  
标签:day09 vue 自定义 示例 插槽 指令 注册 组件

29、自定义指令

(1)概念:自己定义的指令,可以封装一些dom操作,扩展额外的功能。

(2)分类:

1)全局注册
2)局部注册
3)示例:

让表单元素一进入页面就获取焦点

①全局注册

效果:

②局部注册

(效果和全局注册一样,但作用范围不同)

(3)指令的值

自定义指令可以通过等号赋值的形式传参,这个值可以通过binding.vue获取

示例:

效果:

 

(4)封装v-loading加载中指令

加载中显示

加载完成,显示:

代码逻辑:

30、插槽

(1)默认插槽

1)作用:让组件内部的一些结构支持自定义
2)语法:
①组件内需要定制的结构部分,改用<slot></slot>占位
②使用组件时,<MyDialog></ MyDialog >标签内部,传入结构替换slot
③示例:

逻辑:

(2)后备内容(默认值)

1)概念:封装组件时,可以为预留的’<slot>’插槽提供后备内容(默认内容)
2)语法:在<slot>标签内,放置内容,作为默认显示的内容
3)效果:
        ①外部使用组件时,不传东西,则slot会显示后备内容
        ②外部使用组件时,传东西了,则slot整体会被换掉
4)示例:

 

学累了,记得歇歇嗷!我先歇为敬

标签:day09,vue,自定义,示例,插槽,指令,注册,组件
From: https://blog.csdn.net/2301_76648183/article/details/140424388

相关文章