vue2 自定义指令,插槽

这篇具有很好参考价值的文章主要介绍了vue2 自定义指令,插槽。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、学习目标

1.自定义指令

  • 基本语法(全局、局部注册)
  • 指令的值
  • v-loading的指令封装

2.插槽

  • 默认插槽
  • 具名插槽
  • 作用域插槽

二、自定义指令

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-指令名。如:<input type="text" v-focus/>

    注册指令时不用v-前缀,但使用时一定要加v-前缀

4.指令中的配置项介绍

  • inserted:被绑定元素插入父节点时调用的钩子函数

  • el:使用指令的那个DOM元素

三、自定义指令-指令的值

1.需求

实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色

2.语法

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

<div v-color="color">我是内容</div>

2.通过 binding.value 可以拿到指令值,指令值修改会 触发 update 函数

directives: {
  color: {
    inserted (el, binding) {
      el.style.color = binding.value
    },
    update (el, binding) {
      el.style.color = binding.value
    }
  }
}

四、插槽-默认插槽

1.作用

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

vue2 自定义指令,插槽,Vue,vue.js,前端,javascript

2.需求

将需要多次显示的对话框,封装成一个组件

3.问题

组件的内容部分,不希望写死,希望能使用的时候自定义。怎么办

4.插槽的基本语法

  1. 组件内需要定制的结构部分,改用<slot></slot>占位
  2. 使用组件时, <MyDialog></MyDialog>标签内部, 传入结构替换slot
  3. 给插槽传入内容时,可以传入纯文本、html标签、组件

vue2 自定义指令,插槽,Vue,vue.js,前端,javascript

5.代码示例

MyDialog.vue

<template>
  <div class="dialog">
    <div class="dialog-header">
      <h3>友情提示</h3>
      <span class="close">✖️</span>
    </div>

    <div class="dialog-content">
      <!-- 1. 在需要定制的位置,使用slot占位 -->
      <slot></slot>
    </div>
    <div class="dialog-footer">
      <button>取消</button>
      <button>确认</button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  }
}
</script>

<style scoped>

</style>

App.vue

<template>
  <div>
    <!-- 2. 在使用组件时,组件标签内填入内容 -->
    <MyDialog>
      <div>你确认要删除么</div>
    </MyDialog>

    <MyDialog>
      <p>你确认要退出么</p>
    </MyDialog>
  </div>
</template>

<script>
import MyDialog from './components/MyDialog.vue'
export default {
  data () {
    return {

    }
  },
  components: {
    MyDialog
  }
}
</script>

<style>
body {
  background-color: #b3b3b3;
}
</style>

五、插槽-后备内容(默认值)

1.问题

通过插槽完成了内容的定制,传什么显示什么, 但是如果不传,则是空白

vue2 自定义指令,插槽,Vue,vue.js,前端,javascript

能否给插槽设置 默认显示内容 呢?

2.插槽的后备内容

封装组件时,可以为预留的 <slot> 插槽提供后备内容(默认内容)。

3.语法

在 标签内,放置内容, 作为默认显示内容

vue2 自定义指令,插槽,Vue,vue.js,前端,javascript

4.效果

  • 外部使用组件时,不传东西,则slot会显示后备内容

    vue2 自定义指令,插槽,Vue,vue.js,前端,javascript

  • 外部使用组件时,传东西了,则slot整体会被换掉

    vue2 自定义指令,插槽,Vue,vue.js,前端,javascript

六、插槽-具名插槽

1.需求

一个组件内有多处结构,需要外部传入标签,进行定制 vue2 自定义指令,插槽,Vue,vue.js,前端,javascript

上面的弹框中有三处不同,但是默认插槽只能定制一个位置,这时候怎么办呢?

2.具名插槽语法

  • 多个slot使用name属性区分名字

    vue2 自定义指令,插槽,Vue,vue.js,前端,javascript

  • template配合v-slot:名字来分发对应标签

    vue2 自定义指令,插槽,Vue,vue.js,前端,javascript

3.v-slot的简写

v-slot写起来太长,vue给我们提供一个简单写法 #

七、作用域插槽

1.插槽分类

  • 默认插槽

  • 具名插槽

插槽只有两种,作用域插槽不属于插槽的一种分类

2.作用

定义slot 插槽的同时, 是可以传值的。给 插槽 上可以 绑定数据,将来 使用组件时可以用

3.场景

封装表格组件

vue2 自定义指令,插槽,Vue,vue.js,前端,javascript

4.使用步骤

  1. 给 slot 标签, 以 添加属性的方式传值

    <slot :id="item.id" msg="测试文本"></slot>
    
  2. 所有添加的属性, 都会被收集到一个对象中

    { id: 3, msg: '测试文本' }
    
  3. 在template中, 通过 #插槽名= "obj" 接收,默认插槽名为 default文章来源地址https://www.toymoban.com/news/detail-677419.html

    <MyTable :list="list">
      <template #default="obj">
        <button @click="del(obj.id)">删除</button>
      </template>
    </MyTable>
    

到了这里,关于vue2 自定义指令,插槽的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端学习---vue2--指令修饰符详解

    写在前面: 前端感觉系统学起来还行,我也不晓得我是咋快速入门1个月就开始看实习公司代码的。然后现在开始系统复习,然后感觉有的封装的还可以,不过就是我不晓得,像这个指令修饰符,其实说逻辑难写,倒是也没有,就是简单不用自己写. 就像后端判断字符串是否为

    2024年02月14日
    浏览(32)
  • Vue2-收集表单数据、过滤器、内置指令与自定义指令、Vue生命周期

    🥔:我徒越万重山 千帆过 万木自逢春 更多Vue知识请点击——Vue.js 1、不同标签的value属性 若: input type=\\\"text\\\"/ 普通输入框,则v-model收集的是value值,用户输入的就是value值。 若: input type=\\\"radio\\\"/ 单选框,则v-model收集的是value值,且要给标签配置value值。 若: input type=\\\"checkb

    2024年02月13日
    浏览(45)
  • 【vue2第十三章】自定义指令 自定义v-loading指令

    像 v-html,v-if,v-for都是vue内置指令,而我们也可以封装自定义指令,提升编码效率。 什么是自定义指令? 自己定义的一些指令,可以进行一些dom操作,扩展格外的功能。比如让图片懒加载,让input自动聚焦。 自定义指令又分为全局注册和局部注册。 使用方法则是与内置指令

    2024年02月09日
    浏览(44)
  • vue自定义指令v-loading(vue2和vue3)

      1. 目录结构: 2. 代码实现  /directives/loading/loading.vue    loading效果页面(此处使用的antd下面的组件,可自定义) /directives/loading/loading.js (实现loading组件的插入及销毁) /directives/loading/index.js (loading指令的注册) 3. 全局引入(main.js文件) 4. 使用 1. 目录结构 2. 代码实现

    2023年04月23日
    浏览(87)
  • 前端(四)——vue.js、vue、vue2、vue3

    😊博主:小猫娃来啦 😊文章核心: vue.js、vue、vue2、vue3从全局到局部 Vue.js是一款流行的JavaScript框架 vue,vue2,vue3都是vue.js的不同版本。 Vue:Vue.js的第一个版本,也称为Vue 1.x。它于2014年首次发布,并获得了广泛的应用和认可。 Vue2:Vue.js的第二个版本,也称为Vue 2.x。它在Vu

    2024年02月12日
    浏览(75)
  • 【vue2第十四章】 插槽(普通插槽、具名插槽、作用域插槽语法)

    插槽是什么? 在 Vue 2 中,插槽(slot)是一种用于定义组件内部内容分发的机制。它允许你将组件中的一部分内容替换为用户自定义的内容,并在组件内部进行渲染。 通过在组件模板中使用 slot/slot 标签,你可以指定一个插槽的位置。这个位置可以被父组件中的任意内容所填

    2024年02月09日
    浏览(30)
  • Vue2基础八、插槽

    1、插槽 (1)默认插槽 作用:让组件内部的一些 结构 支持 自定义 需求: 将需要多次显示的对话框, 封装成一个组件 问题:组件的内容部分,不希望写死,希望能使用的时候自定义。怎么办? 插槽基本语法: 组件内需要定制的结构部分,改用 slot/slot 占位 使用组件时, MyDi

    2024年02月15日
    浏览(38)
  • Vue.js 2.0 自定义指令

    除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令。注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而,有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令。下面这个例子将聚焦一个 input 元素,像这样: 当页面

    2023年04月19日
    浏览(50)
  • Vue2向Vue3过度核心技术插槽

    1.作用 让组件内部的一些 结构 支持 自定义 2.需求 将需要多次显示的对话框,封装成一个组件 3.问题 组件的内容部分, 不希望写死 ,希望能使用的时候 自定义 。怎么办 4.插槽的基本语法 组件内需要定制的结构部分,改用****占位 使用组件时, ****标签内部, 传入结构替换slo

    2024年02月11日
    浏览(40)
  • 【vue2】组件进阶与插槽详解

    🥳博       主: 初映CY的前说(前端领域) 🌞个人信条: 想要变成得到,中间还有做到! 🤘 本文核心 :v-modedl表单双向绑定、ref|$ref操作dom、dynamic动态组件、$nextTick同步、匿名插槽、具名插槽、作用域插槽 目录(文末有给大家准备好的Xmind思维导图) 一、组件进阶 1.

    2024年02月03日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包