AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【Vue3从零开始-第三章】3-6 插槽和具名插槽

2022-09-26 254
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【Vue3从零开始-第三章】3-6 插槽和具名插槽

]UWOD(KIB9LJS9~S[T{QHM9.png


前言


在上一篇的文章中，我们了解了vue组件中父子组件通过事件进行通信的方法，今天我们继续深入了解一下vue组件中的插槽和具名插槽解决组件内容传递问题。


回顾


之前的内容中我们了解过了vue组件中传参的一些方法，通过v-bind指令或v-model指令都可以对子组件传递一些动态数据值。


疑问❓如果我们想要给子组件传递DOM元素要怎么做呢？是不是还要使用v-bind和v-model指令呢？


我们知道通过动态指令的方式去传递一些简单的字符串或者对象是比较简单的，但是DOM元素会设计到标签、动态数据，有些可能还要做动态绑定的操作。


在vue里面为了方便我们操作这样的事情，给了一个slot插槽标签。


slot


<script>
  const app = Vue.createApp({
    template: `
      <div>
        <myForm />
      </div>
    `
  });
  app.component('myForm', {
    methods: {
      handleClick(){
        console.log('打印一下')
      }
    },
    template: `
      <div>
        <input />
        <button @click="handleClick">提交</button>  
      </div>
    `
  })
  const vm = app.mount('#root');
</script>
复制代码


这段代码就是之前学过的父子组件的操作，如果这时候我们要把子组件中的button标签做成一个动态化的，使用父组件去传递过来，要怎么改一下代码呢？


<script>
  const app = Vue.createApp({
    template: `
      <div>
        <myForm>
          <button>提交</button>
        </myForm>
      </div>
    `
  });
  app.component('myForm', {
    methods: {
      handleClick(){
        console.log('打印一下')
      }
    },
    template: `
      <div>
        <input />
        <slot></slot>
      </div>
    `
  })
  const vm = app.mount('#root');
</script>
复制代码


  • 子组件中，将button标签删除，添加一个slot插槽标签。


  • 父组件中，调用子组件标签时，不用单标签了，可以改成双标签结束的方式。


  • 父组件中的子组件标签中就可以直接传递HTML标签了。



如果有多次调用子组件时，传递的HTML标签就可以自定义了。


const app = Vue.createApp({
    template: `
      <div>
        <myForm>
          <button>提交</button>
        </myForm>
        <myForm>
          <div>确定</div>
        </myForm>
      </div>
    `
});
复制代码


9CE]K8W7EM6DITNUUY7B9~N.png



之前我们在子组件里面添加的button标签是可以触发点击事件的，但是如果我们在slot插槽标签上添加事件呢？


app.component('myForm', {
    methods: {
      handleClick(){
        console.log('打印一下')
      }
    },
    template: `
      <div>
        <input />
        <slot @click="handleClick"></slot>
      </div>
    `
})
复制代码


[X9IE84$5(AQ06(9X44Z11H.png


  • 浏览器中点击按钮时好像并不会触发任何事件，这时候我们可以在slot插槽标签外层添加一个span标签来触发事件。


app.component('myForm', {
    methods: {
      handleClick(){
        console.log('打印一下')
      }
    },
    template: `
      <div>
        <input />
        <span @click="handleClick">
          <slot></slot>
        </span>
      </div>
    `
})
复制代码


L]S$UOW7@7OIE]GEZ0OZHJW.png


  • 这种在子组件的slot插槽标签上触发事件的情况比较少，一般是在父组件传递子组件时就把事件绑定上去了。


slot作用域


上面的例子中我们会发现slot插槽的作用就是将父组件中子组件标签下面的DOM元素传递给子组件中的slot插槽，那么在传递给子组件的时候，如果在子组件标签里面的是动态元素，那用到的是子模板里面的数据呢还是父模板里面的数据呢？


const app = Vue.createApp({
    data(){
      return {
        text1: '提交',
        text2: 'xxx'
      }
    },
    template: `
      <div>
        <myForm>
          <button>{{text1}}</button>
        </myForm>
        <myForm>
          <div>{{text2}}</div>
        </myForm>
      </div>
    `
});
复制代码


FU{U1}D)C9UX(6OK3OX(}2J.png


  • 父模板里面调用的数据属性，使用的都是父模板里面的数据。


  • 子模板里面调用的数据属性，使用的都是子模板里面的数据。


默认插槽


上面说的都是父组件将DOM元素写在子组件标签里面传递过去的，如果有些父组件里面调用子组件时，不传递DOM元素，但是子组件就要显示一些默认的内容了。


<script>
  const app = Vue.createApp({
    data(){
      return {
        text1: '提交',
        text2: 'xxx'
      }
    },
    template: `
      <div>
        <myForm>
          <button>{{text1}}</button>
        </myForm>
        <myForm>
          <div>{{text2}}</div>
        </myForm>
        <myForm>
        </myForm>
      </div>
    `
  });
  app.component('myForm', {
    methods: {
      handleClick(){
        console.log('打印一下')
      }
    },
    template: `
      <div>
        <input />
        <span @click="handleClick">
          <slot>这里是默认内容</slot>
        </span>
      </div>
    `
  })
  const vm = app.mount('#root');
</script>
复制代码


M2A%81T]@YT%U7ST7BDI}LB.png


  • 父组件里面调用了一个空的子组件标签。


  • 子组件中的slot插槽标签中写上默认内容。


  • 当父组件传递了插槽内容，slot标签就会自动匹配传递过来的插槽内容。


  • 如果不需要在子组件里面显示默认内容，也可以直接用一个空的slot插槽标签。


具名插槽


有些时候，我们需要使用一些自定义布局，而这些布局内容可能都会通过插槽的方式去实现。


下面我们就实现一个上中下布局的样式。


<script>
  const app = Vue.createApp({
    template: `
      <div>
        <layout>
            <div>头部内容</div>
            <div>底部内容</div>
        </layout>
      </div>
    `
  });
  app.component('layout', {
    template: `
      <div>
        <slot></slot>
        <div>中间内容</div>
        <slot></slot>
      </div>
    `
  })
  const vm = app.mount('#root');
</script>
复制代码


3XKM{E]TGHXTHXG()E(VE82.png


  • 在浏览器中我们会发现slot插槽标签把父组件中传过来的DOM元素都渲染在一个slot插槽里面的，这样就导致中间内容的上下slot插槽标签里面都是父组件传过来的DOM元素了。


这时候我们就要给插槽取个名字，也就是具名插槽，让slot插槽标签可以更快的匹配对应的内容。


  • 父组件中调用子组件标签时，在里面传递的DOM标签中添加一层template占位元素。


  • 然后使用 v-slot:xxx的方式匹配子组件中的插槽


const app = Vue.createApp({
    template: `
      <div>
        <layout>
          <template v-slot:header>
            <div>头部内容</div>
          </template>
          <template v-slot:footer>
            <div>底部内容</div>
          </template>
        </layout>
      </div>
    `
  });
复制代码


  • 子组件中的slot标签上使用name属性定义名称。


  • 父组件使用v-slot匹配的就是这里的name属性。


app.component('layout', {
    template: `
      <div>
        <slot name="header"></slot>
        <div>中间内容</div>
        <slot name="footer"></slot>
      </div>
    `
})
复制代码


4L7FO[GZ)BHCZ}[TF~]5_B2.png


总结


本篇文章主要就是把vue里面的插槽和具名插槽详细讲解了一遍，希望学习的小伙伴可以多敲一敲代码熟悉熟悉这里面的内容，在项目中写组件的时候会经常用的哦~~~

文章标签：
JavaScript
关键词：
插槽VUE.js
具名VUE.js
vue3插槽VUE.js
插槽具名VUE.js
蜡笔小心_
目录
相关文章
yxybox
|
21天前
|
开发工具 iOS开发 MacOS
基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
最新版研发vite7+vue3.5+pinia3+arco-design仿macos/windows风格网页版OS系统Vite-Vue3-WebOS。
yxybox
181 11
小华同学ai
|
5月前
|
缓存 JavaScript PHP
斩获开发者口碑！SnowAdmin：基于 Vue3 的高颜值后台管理系统，3 步极速上手！
SnowAdmin 是一款基于 Vue3/TypeScript/Arco Design 的开源后台管理框架，以“清新优雅、开箱即用”为核心设计理念。提供角色权限精细化管理、多主题与暗黑模式切换、动态路由与页面缓存等功能，支持代码规范自动化校验及丰富组件库。通过模块化设计与前沿技术栈（Vite5/Pinia），显著提升开发效率，适合团队协作与长期维护。项目地址：[GitHub](https://github.com/WANG-Fan0912/SnowAdmin)。
小华同学ai
777 5
34789737
|
5天前
|
JavaScript 安全
vue3使用ts传参教程
Vue 3结合TypeScript实现组件传参，提升类型安全与开发效率。涵盖Props、Emits、v-model双向绑定及useAttrs透传属性，建议明确声明类型，保障代码质量。
34789737
48 0
34789737
|
2月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些？
虚拟列表在 Vue3 中通过仅渲染可视区域内容，显著提升大数据列表性能，适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景，结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
34789737
304 1
34789737
|
2月前
|
缓存 JavaScript UED
除了循环引用，Vue3还有哪些常见的性能优化技巧？
除了循环引用，Vue3还有哪些常见的性能优化技巧？
34789737
159 0
34789737
|
3月前
|
JavaScript
vue3循环引用自已实现
当渲染大量数据列表时，使用虚拟列表只渲染可视区域的内容，显著减少 DOM 节点数量。
34789737
102 0
dasein58
|
5月前
|
JavaScript API 容器
Vue 3 中的 nextTick 使用详解与实战案例
Vue 3 中的 nextTick 使用详解与实战案例 在 Vue 3 的日常开发中，我们经常需要在数据变化后等待 DOM 更新完成再执行某些操作。此时，nextTick 就成了一个不可或缺的工具。本文将介绍 nextTick 的基本用法，并通过三个实战案例，展示它在表单验证、弹窗动画、自动聚焦等场景中的实际应用。
dasein58
437 17
游客tsrksm3mlhq4y
|
6月前
|
JavaScript 前端开发 算法
Vue 3 和 Vue 2 的区别及优点
Vue 3 和 Vue 2 的区别及优点
游客tsrksm3mlhq4y
399 12
爱心发电丶
|
6月前
|
存储 JavaScript 前端开发
基于 ant-design-vue 和 Vue 3 封装的功能强大的表格组件
VTable 是一个基于 ant-design-vue 和 Vue 3 的多功能表格组件，支持列自定义、排序、本地化存储、行选择等功能。它继承了 Ant-Design-Vue Table 的所有特性并加以扩展，提供开箱即用的高性能体验。示例包括基础表格、可选择表格和自定义列渲染等。
爱心发电丶
441 6
dasein58
|
5月前
|
JavaScript 前端开发 API
Vue 2 与 Vue 3 的区别：深度对比与迁移指南
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架，在过去的几年里，Vue 2 一直是前端开发中的重要工具。而 Vue 3 作为其升级版本，带来了许多显著的改进和新特性。在本文中，我们将深入比较 Vue 2 和 Vue 3 的主要区别，帮助开发者更好地理解这两个版本之间的变化，并提供迁移建议。 1. Vue 3 的新特性概述 Vue 3 引入了许多新特性，使得开发体验更加流畅、灵活。以下是 Vue 3 的一些关键改进： 1.1 Composition API Composition API 是 Vue 3 的核心新特性之一。它改变了 Vue 组件的代码结构，使得逻辑组
dasein58
1525 0

热门文章

最新文章

  • 1
    基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
  • 2
    Vue中如何实现兄弟组件之间的通信
  • 3
    vue3使用ts传参教程
  • 4
    如何从 Vue 2 无痛升级到 Vue 3，一文搞定！
  • 5
    解决VsCode启动Vue项目报错：‘vue-cli-service‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件。
  • 6
    【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】
  • 7
    Nuxt.js（Vue SSR）创建项目到服务器（Nginx+PM2）部署详细流程（下）
  • 8
    vue项目上传到宝塔刷新404？（详细教程）
  • 9
    vue3+ts+vite读取静态资源图片和环境变量
  • 10
    vue项目axios的使用实例详解
  • 1
    Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
    608
  • 2
    用组件懒加载优化Vue应用性能
    286
  • 3
    Vue 表情包输入组件实现代码及详细开发流程解析
    221
  • 4
    Vue 自定义进度条组件封装及使用方法详解
    390
  • 5
    如何高效实现 vue 文件批量下载及相关操作技巧
    352
  • 6
    Vue 项目中如何自定义实用的进度条组件
    147
  • 7
    Vue框架中常见指令的应用概述。
    76
  • 8
    Vue 文件批量下载组件封装完整使用方法及优化方案解析
    353
  • 9
    Vue 表情包输入组件的实现代码：支持自定义表情库、快捷键发送和输入框联动的聊天表情解决方案
    344
  • 10
    Vue 手风琴实现的三种常用方式及长尾关键词解析
    182

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 低代码开发师（初级）实战教程
    • 下一篇
    阿里云云原生一体化数仓 — 数据治理新能力解读