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

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)示例:

 

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

相关推荐

  1. Vue中的定义指令

    2024-07-15 14:32:01       51 阅读
  2. Vue定义指令

    2024-07-15 14:32:01       43 阅读
  3. Vue定义指令

    2024-07-15 14:32:01       43 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-15 14:32:01       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-15 14:32:01       72 阅读
  3. 在Django里面运行非项目文件

    2024-07-15 14:32:01       58 阅读
  4. Python语言-面向对象

    2024-07-15 14:32:01       69 阅读

热门阅读

  1. Windows图形界面(GUI)-SDK-C/C++ - 组合框(ComboBox)

    2024-07-15 14:32:01       24 阅读
  2. vue3实现一个接球小游戏

    2024-07-15 14:32:01       18 阅读
  3. 安装 MySQL与修改配置流程

    2024-07-15 14:32:01       19 阅读
  4. html dialog不显示边框

    2024-07-15 14:32:01       24 阅读
  5. conda

    2024-07-15 14:32:01       26 阅读
  6. 代码随想录算法训练营第三十二天

    2024-07-15 14:32:01       26 阅读
  7. 【并发编程】CPU & IO 密集型

    2024-07-15 14:32:01       18 阅读
  8. python中逻辑运算符and 和 or 的优先级问题。

    2024-07-15 14:32:01       21 阅读