vue 中的slot 和 mixins菜鸟教程下载_slot入门攻略

前言vue 为我们提供了很多复用性的方式,slot 和 mixins 就是其中两种…下面对这两种方式做一下记录插槽使用场景- 该组件被多个地方使用
– 每个父组件中对该组件的内部有一部分需要特殊定制
– slot可以让我们更好的复用组件的同时并对其定制化处理
– 可以理解为父组件想子组件传递了一段 html 文本
要求:1.子组件模板包含至少一个 插槽

vue 中的slot 和 mixins菜鸟教程下载

前言

vue 为我们提供了很多复用性的方式,slot 和 mixins 就是其中两种…下面对这两种方式做一下记录

vue 中的slot 和 mixins菜鸟教程下载_slot入门攻略

插槽使用场景

- 该组件被多个地方使用
- 每个父组件中对该组件的内部有一部分需要特殊定制
- slot可以让我们更好的复用组件的同时并对其定制化处理
- 可以理解为父组件想子组件传递了一段 html 文本
要求:
    1.子组件模板包含至少一个 插槽 <slot></slot>
    2.父组件整个内容片段将插入到 slot 所在的 DOM 位置,并替换掉 slot 标签本身

1.普通插槽 slot

父组件: 负责分发插槽内容
        <child ref=child>
            我是父组件分发给 child 的所有内容
        </child>
        父组件获取子组件可以通过 this.$refs.child 来做操作

子组件:  <template>
            <slot>这里可以放一些默认值</slot>
        </template>
        模板中放置一个 <slot></slot>组件,
        我们可以自定义组件中的方法和数据,封装一些通用逻辑,比如前几篇中封装的 scroll滚动组件

2.具名插槽 子组件通过 name 属性 来匹配父组件分发的内容

父组件: 添加 slot 属性来作为标识
        <div slot="header">我是 header 分发的内容 111</div>
        <div slot="main">我是 main 分发的内容222</div>
        <div slot="footer">我是 footer 分发的内容333</div>

      在2.6.0 以上使用的是 v-slot:header; 默认插槽为: v-slot:default

子组件: slot 添加 name 属性来接受父组件分发的 DOM 元素
        <template>
            <slot name="header"></slot>
            <slot name="main"></slot>
            <slot name="footer"></slot>
        </template>
    当然,我们还可以调换插槽的位置...

3.作用域插槽 父组件可以接收来自子组件的 slot 传递过来的参数值

可以理解为: 子组件中的作用域插槽可以为父组件中的插槽的展示提供数据

子组件:
    <template>
        <div>
            <slot name="header" :value="value"></slot>
        </div>
    </template>
    <script>
        export default {
            data() {
                return {
                    value: '我是子组件的值'
                }
            }
        }
    </script>

父组件:
    <child>
        <template slot="header" slot-scope="slotHeaderProps">
            渲染子组件传过来的对象中 value值{{ slotHeaderProps.value }}
        </template>
    </child>

    在 2.6 以上绑定值的方式: v-slot:header="slotHeaderProps"
    而且可以使用解构 v-slot:header="{value}", 将子组件传过来的值解构

    还有就是, 我们可以把 slot直接写在子组件行内, 不必另起一个 template
    即这样: <child v-slot:header="{value}">{{value}}</child>

vue3.0以后 slot 和 slot=”xxx”,slot-scope 的方式会被废弃…新的用法slot, v-slot:xxx || v-slot:default, v-slot:xxx=”slotProps”

混入 Mixins 使用

- 也是为了实现代码逻辑复用
- 当多个组件中出现业务逻辑重复时我们就可以抽离重复代码片段,写成一个混入对象
- 父组件直接引入这个对象

代码演示

就拿一个比较常见的场景: 下拉加载更多数据; 这类业务在H5端可以说是非常常见了,当我们很多页面都要用到时,就可以抽离成一个混入对象

// 滚动加载
import {throttle} from "@/common/js/tool";

export const scrollMixin = {
  methods: {
    doScrollLoading() {
      // 滚动超出高度
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // 滚动区域高度
      let scrollHeight =
        document.body.scrollHeight || document.body.scrollHeight;
      // 可视区高度
      let clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;

      if (scrollHeight - clientHeight - scrollTop <= this.bottomHeight) {
        // 组件中需加入开关和加载更多; 还是有些耦合了...
        if (!this.isLoadMore) {
          this.loadMore();
        }
      }
    }
  },
  computed: {
    bottomHeight() {
      return this.$store.state.footerHeight;
    }
  },
  mounted() {
    window.addEventListener("scroll", throttle(this.doScrollLoading, 100, 1));
  },
  destroyed() {
    window.removeEventListener("scroll", throttle(this.doScrollLoading, 100, 1));
  }
}

父组件中引入使用

import { scrollMixin } from "@/mixins/scrollMixin";
mixins: [scrollMixin]

注意组件中重写的方法会覆盖混入中的方法,loadMore和 isloadMore 需要在
引用的组件中进行重写
海计划公众号
(0)
上一篇 2020/03/29 01:43
下一篇 2020/03/29 01:43

您可能感兴趣的内容

  • Protractor小白攻略端到端的自动化测试

    Protractor基础入门 官方网址:http://www.protractortest.org GitHub:https://github.com/angular/protra…

    2020/03/05
  • css的repaint和reflow入门基础教程_重绘基础知识入门

    简单理解:repaint主要是针对某一个DOM元素进行的重绘,reflow则是回流,针对整个页面的重排。字面意思来说:repaint就是重绘,reflow就是回流。repaint和reflow的目的是:展示一个新的页面样貌。性能消耗:在性能优先的前提下,性能消耗 reflow大于repaint。体现:repaint是某个DOM元素进行重绘;reflow是整个

    2020/03/22
  • HTML5语义化元素你真的用的正确吗?入门教程_元素新手入门

    HTML5语义元素语义学是研究语言中单词和短语的含义。语义元素=具有意义的元素。 语义元素清楚地描述了它对浏览器和开发人员的意义。 非语义元素的示例:和– 对其内容一无所知。 语义元素的示例:,

    和- 清楚地定义其内容。 所有现代浏览器都支持HTML5语义元素。HTML5新语义元素许多网站都包含

    2020/03/29
  • vue对象render函数的三种实现零基础入门_render基础入门

    import App from ‘./app.vue’ const root = document.createElement(‘div’);
    document.body.appendChild(root);第一种方式($createElement)://写法三:
    const rootVue = new Vue({ router: vueRouter,r

    2020/03/24
  • 微服务开发的 10 个最佳实践使用帮助_微服务基础入门

    在文章《微服务架构概览》中,我详细讨论了微服务架构以及在现代软件开发中使用它的优缺点。那么,什么是微服务架构呢?我给出的定义是:微服务架构是将软件系统分解成可独立部署的自治模块,这些模块通过轻量级的、语言无关的方式进行通信,共同实现业务目标。软件系统是复杂的。由于人脑只能处理一定程度内的复杂性,大型软件系统的高复杂性导致了许多问题。大型复杂的软件系统难于开发

    2020/03/20
  • 6种实现负载均衡技术的方式入门知识_性能基础知识教程

    负载均衡(Load Balance)是集群技术(Cluster)的一种应用,可以将工作任务分摊到多个处理单元,从而提高并发处理能力,有利于提升中大型网站的性能。接下来小编就为大家介绍6种实现负载均衡技术的方式:1. http重定向协议实现负载均衡根据用户的http请求计算出一个真实的web服务器地址,并将该web服务器地址写入http重定向响应中返回给浏览器

    2020/03/29
  • 如何使用统一架构简化全栈开发菜鸟知识_全栈使用攻略

    现代的全栈应用程序通常由六层组成:数据访问、后端模型、API 服务端、API 客户端、前端模型和用户界面。我们需要大量的胶水代码才能将它们全部连接起来,并且领域模型在整个栈中存在重复。因此,开发的敏捷性受到了极大的影响。本文如何使用统一架构来构建全栈应用程序,以及统一架构语言扩展 Liaison。现代的全栈应用程序(例如,单页应用程序或移动应用程序)通常由六

    2020/03/20
  • 程序员黑话指南小白指南_程序员小白攻略

    黑话这个词,说起来各位都会会心一笑。各行各业都有自己的行业内的黑话,产品经理有产品经理的黑话、金融行业有金融行业的黑话,而程序员这个群体虽然虽然忠厚老实,但是却有着丰富的黑话史。今天小甲就给大家来整理整理互联网公司程序员的黑话,出一篇程序员黑话指南,你只有了解程序员的黑话才能跟程序员打成一团,获得buff加成,产品尽早上线。作为程序员你只有熟悉掌握程序员黑话

    2020/04/03
  • 用js获取url地址协议,参数,端口号,锚点等方法总汇入门基础教程_参数基础入门

    在前端开发中,经常会遇到获取URL的相关数据,下面将总结下使用JavaScript来获取url地址的协议,参数,端口号,锚点等方法。获取整个地址栏地址var href = window.location.href;
    console.log(href);//输出完整的url地址获取url协议部分var protocol = window.location.pr

    2020/04/06
  • Vue关键词搜索高亮基础入门_高亮零基础入门

    有时候给页面内容添加一个关键词搜索功能,如果搜索结果能够像浏览器搜索一样高亮显示,那找起来就会很明显体验会好很多。本文就介绍一下关键词搜索高亮的实现方案。实现效果大概如下:可在线预览:http://wintc.top/laboratory/#/search-highlight。一、实现原理实现原理很简单:使用正则匹配出文本内容中的所有关键词,在关键词外包一层

    2020/03/22
  • webpack配置sass模块的加载基础入门_Sass基础知识入门

    webpack管理的项目,我们希望用sass定义样式,为了正常编译,需要做如下配置。这里不讲webpack的入门,入门的文章,我推荐这篇《webpack入门》。为了使用sass,我们需要安装sass的依赖包//在项目下,运行下列命令行
    npm install –save-dev sass-loader
    //因为sass-loader依赖于node-sass

    2020/04/03
  • 如何简化你的Vuex Store基础入门_vuex菜鸟攻略

    随着Vue应用程序的大小增加,Vuex Store中的actions和mutations也会增加。本文,我们将介绍如何将其减少到易于管理的东西。Vuex是什么Vuex是vue.js应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储,其规则确保状态只能以可预测的方式进行变更。我们怎么使用Vuex我们正在使用Vuex在Factory Core Fra

    2020/03/26
  • PageSpeed Reports教程视频_一款检测搜索引擎最佳优化评分的监测工具

    PageSpeed Reports教程视频 官方网址:https://pagespeedreports.proteusthemes.com/ 简介描述:一款检测搜索引擎最佳优化评分…

    2020/03/06
  • 几种好用的经典webshell(php)小白攻略_安全小白知识

    webshell就是以网页文件形式存在的一种命令执行环境,也可以将其称做为一种网页后门。黑客在入侵了一个网站后,通常会将php后门文件与网站服务器WEB目录下正常的网页文件混在一起,然后就可以使用浏览器来访问php后门,得到一个命令执行环境,以达到控制网站服务器的目的。 顾名思义,“web”的含义是显然需要服务器开放web服务,“shell”的含义是取得对服

    2020/03/31
  • PDFcandy基础教程_汇集众多常用PDF在线工具

    PDFcandy基础教程 官方网址:https://pdfcandy.com/ 简介描述:汇集众多常用PDF在线工具 PDFCandy 是一个汇集了许多常用PDF工具的免费在线服务…

    2020/03/10
  • JSON.parse 比 Object 字面量语法更快菜鸟教程下载_json新手入门

    针对太长不看的读者因为 JSON 语法比 Javascript 的语法更简单,因此解析 JSON 比解析 Javascript 更高效。当一个 web app 需要加载在首次加载时,解析一个非常复杂的、大型的、符合 JSON 规范的对象字面量配置对象时(比如配置 redux 的 store),我们可以根据这一点来提升首屏加载性能。为什么 JSON.parse

    2020/03/22