Vue 插槽的介绍与使用

简介: 组件的插槽是为了让我们封装的组件更加具有扩展性。

Vue 插槽的介绍与使用


插槽


  1. 组件的插槽是为了让我们封装的组件更加具有扩展性。


  1. 让使用者可以决定组件内部的一些内容到底展示什么。


  1. 例子:
  • 移动网页中的导航栏:
  • 移动开发中,几乎每个页面都有导航栏。
  • 导航栏我们必然会封装成一个插件,比如 nav-bar 组件。
  • 一旦有了这个组件,我们就可以在多个页面中复用了。


如何封装这类组件呢?slot


  1. 如何去封装这类的组件呢?
  • 他们有很多区别,但是也有很多共性。
  • 如果每一个单独封装一个组件,显然不合适,比如每个页面都返回,这部分内容我们就要重复去封装。
  • 但是如果封装成一个,也不合理:有些左面是菜单,有些是返回,有些中间是搜索,有些是文字等等。


  1. 如何封装合适呢?抽取共性,保留不同。
  • 最好的封装方式就是将共性抽取到组件中,将不同暴露为插槽。
  • 一旦我们预留了插槽,就可以让使用者根据自己的需求,决定插槽中插入什么内容。
  • 是搜索框,还是文字,还是菜单,由调用者自己来决定。


  1. 这就是为什么我们要学习组件中的插槽 slot 的原因。


slot 基本使用


  1. 在子组件中,使用特殊元素就可以为子组件开启一个插槽。


  1. 该插槽插入什么内容取决于父组件如何使用。


  1. 中的内容表示,如果没有在该组件中插入任何其他内容,就默认显示该内容。


  1. 插槽的使用方法:
<div id="app">
  <my-cpn>
    <h2>
      我是替换插槽的内容
    </h2>
    <p>
      我也是替换插槽的内容
    </p>
  </my-cpn>
</div>
<template id="myCpn">
  <div>
    <slot>我是插槽中的默认内容</slot>
  </div>
</template>
<script>
  Vue.component('my-cpn',{
    template:'#myCpn'
  })
  let app = new Vue({
    el: '#app'
  })
</script>


具名插槽


  1. 当子组件的功能复杂时,子组件的插槽可能并非是一个。
  • 比如封装一个导航栏的子组件,就需要三个插槽,分别代表左边、中间、右边。
  • 那么,外面在给插槽插入内容时,如何区分插入的是哪一个呢?
  • 这个时候,就需要给插槽起一个名字。


  1. 如何使用具名插槽呢?
  • 非常简单,只要给 slot 元素一个 name 属性即可。
<div>
  <!-- 没有传入任何内容 -->
  <my-cpn></my-cpn>
  <!-- 传入某一个内容 -->
  <my-cpn>
    <span slot="left"></span>
  </my-cpn>
  <!-- 传入所有的内容 -->
  <my-cpn>
    <span slot="left">我是返回</span>
    <span slot="center">我是标题</span>
    <span slot="right">我是菜单</span>
  </my-cpn>
</div>
<template id="myCpn">
  <div>
    <slot name="left">我是左侧</slot>
    <slot name="center">我是中间</slot>
    <slot name="right">我是右侧</slot>
  </div>
</template>
<script>
  Vue.component('my-cpn',{
    template: '#myCpn'
  })
  let app = new Vue({
    el: '#app'
  })
</script>


作用域插槽


编译作用域


  1. 在学习插槽以前,先理解一个概念:编译作用域。


  1. 官方对于编译的作用域解析比较简单。
<div id="app">
  <cpn v-show="isShow"></cpn>
</div>
<template id="cpn">
    <div>
        <h2>我是组件标题</h2>
        <p>哈哈哈</p>
    </div>
</template>
<script src="../Vuecode/Vue.min.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            isShow: true
        },
        components: {
            cpn: {
                template: '#cpn',
                data() {
                    return {
                        isShow: false
                    }
                }
            }
        }
    })
</script>
  1. 下面的代码是否可以被渲染出来?
  • 中,使用了 isShow 属性。
  • isShow 属性即包含在组件中,又包含在 Vue 实例中。


答案:最终是可以渲染出来的,也就是使用的是 Vue 实例的属性。


  1. 为什么呢?
  • 官方给出了一条准则:父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译。
  • 而我们在使用的时候,整个组建的使用过程是相当于在父组件中出现的。
  • 那么他的作用域就是父组件,使用的属性也是属于父组件的属性。
  • 因此,isShow 使用的是 Vue 实例的属性,而不是子组件的属性。


作用域插槽:准备


  1. 父组件替换插槽的标签,但是内容由子组件来提供。


  1. 先来提一个需求:
  • 子组件中包括一组数据,比如:pLanguages:['JavaScript','Python','Swift','Go','C++']。
  • 需要在多个界面进行展示。
  • 某些界面是以水平方向——展示的。
  • 某些界面是以列表形式展示的。
  • 某些界面直接展示一个数组。
  • 内容在子组件,怎么让父组件进行展示?
  • 利用 slot 作用域插槽就可以了。


作用域插槽的使用

<div id="app">
    <cpn></cpn>
    <cpn>
      <template slot-scope="slot">
        <span>{{slot.data.join(' - ')}}</span>
      </template>
    </cpn>
    <cpn>
      <template slot-scope="slot">
        <span>{{slot.data.join(' * ')}}</span>
      </template>
    </cpn>
  </div>
  <template id="cpn">
    <div>
      <slot :data="pLanguages">
        <ul>
          <li v-for="item in pLanguages">{{item}}</li>
        </ul>
      </slot>
    </div>
  </template>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        isShow: true
      },
      components: {
        cpn: {
          template: '#cpn',
          data() {
            return {
              pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']
            }
          }
        }
      }
    })
  </script>


目录
打赏
0
0
0
0
59
分享
相关文章
|
3月前
|
vue使用iconfont图标
vue使用iconfont图标
177 1
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
本文介绍了使用 Vue Flow 绘制流程图的方法与技巧。Vue Flow 是一个灵活强大的工具,适合自定义复杂的流程图。文章从环境要求(Node.js v20+ 和 Vue 3.3+)、基础入门案例、自定义功能(节点与连线的定制、事件处理)到实际案例全面解析其用法。重点强调了 Vue Flow 的高度灵活性,虽然预定义内容较少,但提供了丰富的 API 支持深度定制。同时,文中还分享了关于句柄(handles)的使用方法,以及如何解决官网复杂案例无法运行的问题。最后通过对比 mermaid,总结 Vue Flow 更适合需要高度自定义和复杂需求的场景,并附带多个相关技术博客链接供进一步学习。
属性描述符初探——Vue实现数据劫持的基础
属性描述符还有很多内容可以挖掘,比如defineProperty与Proxy的区别,比如vue2与vue3实现数据劫持的方式有什么不同,实现效果有哪些差异等,这篇博文只是入门,以后有时间再深挖。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
117 12
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
299 8
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
102 1
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等