前端宝典二十五:vue2高阶用法mixin、transition、slot

news2024/12/24 20:55:36

本文主要探讨vue2中几个高阶的用法:mixin、transition、slot

一、mixin

在 Vue 中,mixin(混入)是一种用于在多个组件之间共享代码的机制。它允许你定义可重用的选项对象,并将其混入到不同的组件中。

1、使用方法

  1. 创建一个混入对象:

    const myMixin = {
      data() {
        return {
          sharedData: '这是混入中的共享数据',
        };
      },
      methods: {
        sharedMethod() {
          console.log('这是混入中的共享方法');
        },
      },
    };
    
  2. 在组件中使用混入:

    <template>
      <div>
        <p>{{ sharedData }}</p>
        <button @click="sharedMethod">调用混入方法</button>
      </div>
    </template>
    
    <script>
    import { myMixin } from './path/to/mixin';
    
    export default {
      mixins: [myMixin],
    };
    </script>
    

在这个例子中,组件将混入对象中的datamethods选项混入到自身中,从而可以访问sharedDatasharedMethod

2、mixin中使用计算属性

在 Vue 的混入(mixin)中可以使用计算属性,方式与在组件中类似。以下是一个示例:

创建混入对象

const myMixin = {
  data() {
    return {
      num1: 10,
      num2: 20,
    };
  },
  computed: {
    sum() {
      return this.num1 + this.num2;
    },
  },
};

在组件中使用混入

<template>
  <div>
    <p>数字 1:{{ num1 }}</p>
    <p>数字 2:{{ num2 }}</p>
    <p>两数之和:{{ sum }}</p>
  </div>
</template>

<script>
import { myMixin } from './path/to/mixin';

export default {
  mixins: [myMixin],
};
</script>

在这个例子中,混入对象myMixin定义了两个数据属性num1num2,以及一个计算属性sum用于计算它们的和。在组件中混入这个对象后,可以直接访问这些属性和计算属性。

需要注意的是,如果组件自身也定义了与混入中同名的计算属性,那么组件中的计算属性会覆盖混入中的计算属性,就像数据属性和方法可能会发生的命名冲突一样。为了避免冲突,可以使用更具描述性的命名或者在必要时进行适当的调整。

3、如何实现多个混入

在 Vue 中可以很方便地实现使用多个混入(mixin)。以下是具体步骤:

一、创建多个混入对象

  1. 第一个混入对象 mixin1
const mixin1 = {
  data() {
    return {
      dataFromMixin1: '这是混入 1 的数据',
    };
  },
  methods: {
    methodFromMixin1() {
      console.log('这是混入 1 的方法');
    },
  },
};
  1. 第二个混入对象 mixin2
const mixin2 = {
  computed: {
    computedFromMixin2() {
      return '这是混入 2 的计算属性结果';
    },
  },
  created() {
    console.log('混入 2 被创建');
  },
};

二、在组件中使用多个混入

<template>
  <div>
    <p>{{ dataFromMixin1 }}</p>
    <p>{{ computedFromMixin2 }}</p>
    <button @click="methodFromMixin1">调用混入 1 的方法</button>
  </div>
</template>

<script>
import { mixin1, mixin2 } from './path/to/mixins';

export default {
  mixins: [mixin1, mixin2],
};
</script>

在这个例子中,组件同时混入了 mixin1mixin2,可以访问两个混入对象中的数据、方法和计算属性等。

如果多个混入对象中存在同名的选项,遵循以下规则:

  • 数据属性:组件中的数据属性会覆盖混入对象中的同名数据属性。
  • 方法:组件中的方法会覆盖混入对象中的同名方法。
  • 计算属性:组件中的计算属性会覆盖混入对象中的同名计算属性。

总之一句话,为了数据安全可维护,组件的数据属性、方法、计算属性会覆盖mixin的同名的

为了避免命名冲突,可以使用更具描述性的命名或者在必要时进行适当的调整。同时,多个混入的使用应该谨慎,以确保代码的可维护性和可读性。

4、可能遇到的问题

  1. 命名冲突:如果混入对象和组件自身定义了相同的选项,可能会导致命名冲突。在这种情况下,组件中的选项将覆盖混入对象中的选项。为了避免命名冲突,可以使用不同的命名约定或者在混入对象中使用更具描述性的名称。

    const myMixin = {
      data() {
        return {
          mixinData: '这是混入中的数据',
        };
      },
      methods: {
        mixinMethod() {
          console.log('这是混入中的方法');
        },
      },
    };
    
    const myComponent = {
      data() {
        return {
          componentData: '这是组件中的数据',
          // 与混入中的 mixinData 冲突,组件中的选项将覆盖混入中的选项
          mixinData: '覆盖后的混入数据',
        };
      },
      methods: {
        componentMethod() {
          console.log('这是组件中的方法');
        },
        // 与混入中的 mixinMethod 冲突,组件中的选项将覆盖混入中的选项
        mixinMethod() {
          console.log('覆盖后的混入方法');
        },
      },
      mixins: [myMixin],
    };
    
  2. 可维护性问题:当使用多个混入对象时,可能会导致代码的可维护性降低。因为很难确定一个特定的选项来自哪个混入对象,尤其是当混入对象之间存在复杂的依赖关系时。为了提高可维护性,可以尽量减少混入对象的数量,或者使用更清晰的命名约定和文档说明。

    const mixin1 = {
      data() {
        return {
          dataFromMixin1: '这是混入 1 中的数据',
        };
      },
      methods: {
        methodFromMixin1() {
          console.log('这是混入 1 中的方法');
        },
      },
    };
    
    const mixin2 = {
      data() {
        return {
          dataFromMixin2: '这是混入 2 中的数据',
        };
      },
      methods: {
        methodFromMixin2() {
          console.log('这是混入 2 中的方法');
        },
      },
    };
    
    const myComponent = {
      data() {
        return {
          componentData: '这是组件中的数据',
        };
      },
      methods: {
        componentMethod() {
          console.log('这是组件中的方法');
        },
      },
      mixins: [mixin1, mixin2],
    };
    
  3. 调试困难:由于混入对象中的代码与组件自身的代码混合在一起,可能会导致调试困难。当出现问题时,很难确定问题是来自组件还是混入对象。为了便于调试,可以在混入对象中添加适当的日志和错误处理代码,以便更好地跟踪问题的来源。

    const myMixin = {
      created() {
        console.log('混入对象被创建');
        try {
          // 可能会引发错误的代码
          const result = someFunctionThatMightThrowError();
          console.log(result);
        } catch (error) {
          console.error('混入对象中出现错误:', error);
        }
      },
    };
    
    const myComponent = {
      created() {
        console.log('组件被创建');
      },
      mixins: [myMixin],
    };
    

总之,在使用 Vue 的混入机制时,需要注意命名冲突、可维护性和调试困难等问题。合理地使用混入对象可以提高代码的可重用性,但也要谨慎使用,以确保代码的清晰和可维护性。

二、transition

在 Vue 中,<transition> 是一个非常有用的特性,它可以为元素的插入、更新和移除添加过渡效果。

1、基本用法

1. 简单过渡

 <transition name="fade">
   <div v-if="show">Hello World!</div>
 </transition>
  .fade-enter-active,
  .fade-leave-active {
     transition: opacity 0.5s;
   }
  .fade-enter,
  .fade-leave-to {
     opacity: 0;
   }

show 状态改变时,<div> 元素会有淡入淡出的效果。

---------------------------------------------------------------------------->

1、通过transition的name属性,定义过渡动画的class规范
2、使用class类来控制动画
3、首先组件即将出现,vue将其添加到dom中,然后绑定对应的class,实现进场过渡效果
4、元素退场执行完成会transitionend,vue将其从dom中删除remove

2. 多个元素过渡

 <transition name="fade">
      <div v-if="show" key="1">A</div>
      <div v-else key="2">B</div>
 </transition>

.slide-enter-active,
.slide-leave-active {
   transition: transform 0.5s;
 }
.slide-enter,
.slide-leave-to {
   transform: translateX(100px);
 }

根据 showAshowB 的状态切换两个元素,有滑动效果,但是要注意这种过个元素过渡动画需要有key

2、过渡模式

1. in-out 模式

新元素先进行过渡进入,旧元素过渡离开。

<transition name="fade" mode="in-out">
      <p v-if="show" key="1">transition hello1 effect</p>
      <p v-else key="2">transition hello2 effect</p>
</transition>

2. out-in 模式

旧元素先过渡离开,新元素再过渡进入。

<transition name="fade" mode="out-in">
      <p v-if="show" key="1">transition hello1 effect</p>
      <p v-else key="2">transition hello2 effect</p>
</transition>

3、结合列表过渡

1. 列表过渡

 <transition-group name="list">
   <div v-for="item in items" :key="item.id">{{ item.text }}</div>
 </transition-group>
  .list-enter-active,
  .list-leave-active {
     transition: all 0.5s;
   }
  .list-enter,
  .list-leave-to {
     opacity: 0;
     transform: translateY(20px);
   }

2. 状态过渡

可以为列表的添加、删除和移动添加过渡效果。

  <transition-group name="list" tag="ul">
    <li v-for="item in items" :key="item.id" :data-index="item.id">
      {{ item.text }}
    </li>
  </transition-group>
 new Vue({
   data: {
     items: [
       { id: 1, text: 'Item 1' },
       { id: 2, text: 'Item 2' },
       { id: 3, text: 'Item 3' },
     ],
   },
   methods: {
     addItem() {
       this.items.push({ id: 4, text: 'New Item' });
     },
     removeItem() {
       this.items.pop();
     },
   },
 });
  .list-move {
     transition: transform 0.5s;
   }

4、自定义过渡类名

可以使用 enter-classenter-active-classenter-to-classleave-classleave-active-classleave-to-class 属性来自定义过渡类名。

<transition
  enter-class="custom-enter"
  enter-active-class="custom-enter-active"
  enter-to-class="custom-enter-to"
  leave-class="custom-leave"
  leave-active-class="custom-leave-active"
  leave-to-class="custom-leave-to"
>
  <div v-if="show">Hello World!</div>
</transition>

5、结合动态过渡

根据不同条件使用不同的过渡效果。

<transition :name="transitionName">
  <div v-if="show">Hello World!</div>
</transition>
new Vue({
  data: {
    show: true,
    transitionName: 'fade',
  },
  methods: {
    changeTransition() {
      this.transitionName = 'slide';
    },
  },
});

通过 <transition><transition-group> 可以为 Vue 应用添加丰富的过渡效果,提升用户体验。

三、slot

在 Vue 中,slot(插槽)是一种用于在组件中传递内容和实现组件内容分发的机制。它允许父组件向子组件传递内容,子组件可以在特定的位置显示这些内容。

1、插槽的类型

  1. 默认插槽:当没有指定具名插槽时使用的插槽。父组件传递的内容将在子组件的默认插槽位置显示。
  2. 具名插槽:通过给插槽指定一个名称,父组件可以传递不同的内容到不同的具名插槽,子组件可以根据插槽名称来显示相应的内容。
  3. 作用域插槽:允许子组件向父组件传递数据,并在父组件中使用这些数据来渲染内容。作用域插槽可以在父组件中访问子组件的数据,从而实现更灵活的内容分发。

2、实例

  1. 默认插槽示例

子组件(ChildComponent.vue):

<template>
    <div class="hello">
      <h2>Child Slot Demo</h2>
      <slot>默认文本显示</slot>      
    </div>
</template>

父组件(App.vue):

 <template>
    <div class="hello">
      <h1>SLOT DEMO</h1>
      <SlotChild>父组件传递的值</SlotChild>      
    </div>
</template>

页面显示如下:
---------------------------------------------------------------------------->

在这里插入图片描述

---------------------------------------------------------------------------->

  1. 具名插槽示例

子组件(SlotChild.vue):

<template>
    <div>
      <h2>具名插槽子组件</h2>
      <header>
        <slot name="header">默认头部内容</slot>
      </header>
      <main>
        <slot>默认主体内容</slot>
      </main>
      <footer>
        <slot name="footer">默认底部内容</slot>
      </footer>
    </div>
  </template>

父组件(App.vue):

<template>
    <SlotChild>
        <template v-slot:header>
            <h3>自定义头部</h3>
        </template>
        <p>自定义主体内容</p>
        <template v-slot:footer>
            <p>自定义底部内容</p>
        </template>
    </SlotChild>
</template>

页面显示如下:
---------------------------------------------------------------------------->

在这里插入图片描述
---------------------------------------------------------------------------->

3. 作用域插槽示例

子组件(ScopedSlotComponent.vue):

<template>
    <div>
      <ul>
        <li v-for="item in items" :key="item.id">
          <slot :item="item">{{ item.text }}123123</slot>
        </li>
      </ul>
    </div>
  </template>

父组件(App.vue):

<template>
    <div>
        <SlotChild>
        <template v-slot="{ item }">
            <span>{{ item.id }} - {{ item.text }}</span>
        </template>
        </SlotChild>
    </div>
</template>

页面显示如下:
---------------------------------------------------------------------------->
在这里插入图片描述
---------------------------------------------------------------------------->

通过使用插槽,Vue 允许你创建更加灵活和可复用的组件,使组件之间的内容分发更加方便和高效。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2099334.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

重新修改 Qt 项目的 Kit 配置

要重新修改 Qt 项目的 Kit 配置&#xff0c;你可以按照以下步骤进行操作&#xff1a; 1. 打开 Qt Creator 首先&#xff0c;启动 Qt Creator&#xff0c;确保你的项目已经打开。 2. 进入项目设置 在 Qt Creator 中&#xff0c;点击菜单栏的 “Projects” 标签&#xff08;通…

python3兼容python2吗

不兼容&#xff0c;最明显的是print变成了函数。 最重要的变化&#xff1a; 第一点是python2里的str变为了python3里的byte&#xff0c;而str由unicode str取代&#xff0c;因此一些网络编程&#xff0c;hash加密的函数需要将参数encode处理。 第二点是大量的python2库没有被…

C++入门8——vector的使用

目录 1.什么是vector&#xff1f; 2.vector的常见构造 2.1 无参默认构造 2.2 构造并初始化n个val 2.3 拷贝构造 2.4 使用迭代器区间构造 2.5 验证 3.vector的遍历和访问 3.1 下标[]访问 3.2 iterator迭代器访问 3.3 范围for访问 3.4 at访问 4.vector的容量操作 …

挂载磁盘时有多个文件系统

mount: /opt/storage/data1/: more filesystems detected on /dev/md5; use -t or wipefs(8). 1、解决方法一 mount -t ext4 /dev/md5 /opt/data2、解决方法二 #返回磁盘有那些文件系统和格式 wipefs /dev/md5 #清除文件系统和元数据 wipefs -a -f /dev/md5 #再次查看将没有任…

c++习题29-大整数的因子

目录 一&#xff0c;题目 二&#xff0c;思路 三&#xff0c;代码 一&#xff0c;题目 描述 已知正整数k满足2≤k≤9&#xff0c;现给出长度最大为30位的十进制非负整数c&#xff0c;求所有能整除c的k。 输入描述 一个非负整数c&#xff0c;c的位数≤30。 输出描述 若…

开学要买什么?出门少不了续电神器充电宝!性价比超高充电宝

宝子们&#xff0c;开学季又来啦&#xff01;新的学期&#xff0c;新的开始&#xff0c;大家是不是都在忙着准备各种学习用品和生活好物呢&#xff1f;在众多开学必备物品中&#xff0c;有一个东西可千万不能忘记&#xff0c;那就是我们的续电神器 —— 充电宝&#xff01;出门…

chrome插件模拟isTrusted的事件

文章目录 方法原理 使用js模拟的事件isTrusted的值时false。有的时候我们想要模拟sTrusted未true的事件就比较麻烦了。 我们可以利用chrome插件的 chrome.debugger解决改问题。 方法 大体思路是&#xff1a;模拟事件的请求从content_script.js发出&#xff0c;到达background…

通过 GitHub Actions 执行数据库 Schema 变更工作流

原文地址 https://www.bytebase.com/docs/tutorials/github-ci/ 教程库&#xff1a;https://github.com/bytebase/github-action-example 开发者们喜欢将 Schema 变更脚本与应用程序代码一起保存在 Git 中&#xff0c;这样变更脚本就能像应用程序代码一样接受审核和版本控制&…

2024年06月 C/C++(六级)真题解析#中国电子学会#全国青少年软件编程等级考试

C/C++编程(1~8级)全部真题・点这里 第1题:区块反转 给定一个单链表 L,我们将每 K 个结点看成一个区块(链表最后若不足 K 个结点,也看成一个区块),请编写程序将 L 中所有的区块链反转。例如:给定 L 为 1→2→3→4→5→6→7→8,K 为 3,则输出应该为 7→8→4→5→6→1→…

百度地图绘制电子围栏(包括移动端绘制操作)以及检测坐标是否在电子围栏内

由于本人在PC端仅使用了多边形绘制&#xff0c;但矩形跟多边形用法基本一样&#xff0c;圆形并未使用&#xff0c;如不符合读者需求也可以参考一下。 绘制后得到的数据可能不同&#xff0c;但绘制方法仅仅是传递的参数不同。 关于给坐标数组在地图绘制图形的效果在移动端部分包…

【读书笔记-《30天自制操作系统》-14】Day15

本篇内容开始讲解多任务。本篇内容结构很简单&#xff0c;先讲解任务切换的原理&#xff0c;再讲解任务切换的代码实践。但是涉及到的知识不少&#xff0c;理解上也有些难度。 1. 任务切换与多任务原理 1.1 多任务与任务切换 所谓多任务&#xff0c;指的是操作系统同时运行多…

ambari-hdp启动yarn报错Corruption: checksum mismatch

ambari-hdp启动yarn报错Corruption: checksum mismatch 页面报错 Traceback (most recent call last):File "/var/lib/ambari-agent/cache/stacks/HDP/3.0/services/YARN/package/scripts/nodemanager.py", line 102, in <module>Nodemanager().execute()Fil…

万字文档带你走进Python的世界

目录 Python基本使用语法 老生常谈 Python中的注释 Python变量 定义变量 变量类型 Python变量的特点 Python中的输入与输出 Python中的运算符 算术运算符 /和// **运算符 关系运算符 逻辑运算符 赋值运算符 Python运算符优先级 Python分支语句 if语句和if-else语句 if-else if-…

Java | Leetcode Java题解之第386题字典序排数

题目&#xff1a; 题解&#xff1a; class Solution {public List<Integer> lexicalOrder(int n) {List<Integer> ret new ArrayList<Integer>();int number 1;for (int i 0; i < n; i) {ret.add(number);if (number * 10 < n) {number * 10;} els…

Datawhale X 李宏毅苹果书 AI夏令营

文章目录 我认为苹果书是最好的深度学习原理教材 第三章开篇讲的就是为什么深度学习模型会优化失败&#xff0c;这个问题其它在我们训练深度学习模型的过程中是非常常见的一种现象&#xff1a;明明使用了更加深层的结构&#xff0c;但它的表现与之前一样&#xff0c;有时甚至不…

企业IT服务管理(ITSM)的实践与探索

随着信息技术的飞速发展&#xff0c;企业对IT服务管理&#xff08;ITSM&#xff09;的需求也日益增长。在这个背景下&#xff0c;某大型集团&#xff08;以下简称“该机构”&#xff09;逐步构建了完善的IT服务管理体系&#xff0c;其发展历程和实践经验对于广大运维团队而言&a…

OceanBase V4.2解析:如何用迭代器 Generator快速生成任意数据

前言 OceanBase 4.2 版本新增了迭代器 generator 函数。尽管这一功能在数据库领域中已属于通用能力&#xff0c;postgresql 也提供了类似的函数&#xff0c;然而&#xff0c;与MySQL和Oracle数据库在默认情况下是需要用户额外编写函数来实现的。OceanBase 4.2 的这一更新也是满…

鸿蒙(API 12 Beta6版)图形【AR物体摆放】 AR引擎服务

概要 本章节通过AR Engine识别设备周围的平面&#xff0c;并允许用户在平面上放置虚拟物体&#xff0c;实现虚拟和现实的融合。AR物体摆放可用于虚拟家具、数字展厅等应用&#xff0c;给用户提供虚实结合的新体验。通过本示例&#xff0c;您可以学习并掌握如何使用AR Engine开…

刷题记录(2)

1. HWOD机试 - 模拟消息队列(100) package com.yue.test;import org.junit.Test;import java.util.ArrayList; import java.util.Arrays; import java.util.LinkedList; import java.util.List;/*** Author: 夜雨* Date: 2021-12-08-10:31* Description:* Version 1.0*/ public…

C#编译成32和64位的区别

C#编译成32和64位的区别 背景 C#32位客户端项目在把代码提交到客户端之后&#xff0c;jinkens直接崩掉了。原因是内存占用100%运维同学建议改成64位&#xff0c;理由是电脑内存大&#xff0c;客观条件IT不给扩。那么在同一台电脑上&#xff0c;32位和64位在编译过程中有什么区…