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

2024-09-03 00:44
文章标签 javascript vue 用法 前端 高阶 vue2 frontend 二十五 slot 宝典 mixin transition

本文主要是介绍前端宝典二十五：vue2高阶用法mixin、transition、slot，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本文主要探讨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>

在这个例子中，组件将混入对象中的data和methods选项混入到自身中，从而可以访问sharedData和sharedMethod。

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定义了两个数据属性num1和num2，以及一个计算属性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>

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

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

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

总之一句话，为了数据安全可维护，组件的数据属性、方法、计算属性会覆盖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);}

根据 showA 和 showB 的状态切换两个元素，有滑动效果，但是要注意这种过个元素过渡动画需要有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-class、enter-active-class、enter-to-class、leave-class、leave-active-class 和 leave-to-class 属性来自定义过渡类名。

<transitionenter-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 允许你创建更加灵活和可复用的组件，使组件之间的内容分发更加方便和高效。

这篇关于前端宝典二十五：vue2高阶用法mixin、transition、slot的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1131543。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
《纳瓦尔宝典》是纳瓦尔·拉维坎特（Naval Ravikant）的智慧箴言

《纳瓦尔宝典》是纳瓦尔·拉维坎特（Naval Ravikant）的智慧箴言

《纳瓦尔宝典》是一本由埃里克·乔根森（Erik Jorgensen）编著的书籍，该书于2022年5月10日由中信出版社出版。这本书的核心内容围绕硅谷知名天使投资人纳瓦尔·拉维坎特（Naval Ravikant）的智慧箴言，特别是关于财富积累和幸福人生的原则与方法。 晓北斗推荐 《纳瓦尔宝典》 基本信息 书名：《纳瓦尔宝典》作者：[美] 埃里克·乔根森译者：赵灿出版时间：2022
阅读更多...
计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者：计算机编程-吉哥 🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。 🍊心愿：点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能
阅读更多...
【C++高阶】C++类型转换全攻略：深入理解并高效应用

【C++高阶】C++类型转换全攻略：深入理解并高效应用

📝个人主页🌹：Eternity._ ⏩收录专栏⏪：C++ “ 登神长阶 ” 🤡往期回顾🤡：C++ 智能指针 🌹🌹期待您的关注 🌹🌹 ❀C++的类型转换 📒1. C语言中的类型转换📚2. C++强制类型转换⛰️static_cast🌞reinterpret_cast⭐const_cast🍁dynamic_cast 📜3. C++强制类型转换的原因📝
阅读更多...
Vue3项目开发——新闻发布管理系统（六）

Vue3项目开发——新闻发布管理系统（六）

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后，系统就进入了首页。接下来，也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分，左侧为系统的菜单栏，右侧
阅读更多...
【VUE】跨域问题的概念，以及解决方法。

【VUE】跨域问题的概念，以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略，该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同，则需要服务器显式地允许这种跨域请求。一般在springbo
阅读更多...
bytes.split的用法和注意事项

bytes.split的用法和注意事项

当然，我很乐意详细介绍 bytes.Split 的用法和注意事项。这个函数是 Go 标准库中 bytes 包的一个重要组成部分，用于分割字节切片。 基本用法 bytes.Split 的函数签名如下： func Split(s, sep []byte) [][]byte s 是要分割的字节切片sep 是用作分隔符的字节切片返回值是一个二维字节切片，包含分割后的结果 基本使用示例： pa
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2