vue-Mixin-复用代码片段

这篇具有很好参考价值的文章主要介绍了vue-Mixin-复用代码片段。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 介绍

在软件开发中,代码复用是一个重要的原则,它可以帮助我们避免重复的代码,提高代码的可维护性和可读性。在Vue.js中,我们可以使用mixins来复用代码片段。Mixin可以包含任何组件选项。当组件使用Mixin时,所有Mixin对象的选项将被混入到该组件的选项中。

2. Mixin的工作原理

Mixin对象可以包含任何组件选项。当组件使用Mixin时,所有Mixin对象的选项将被“混入”该组件本身的选项。这意味着,如果Mixin中的某个选项与组件中的选项具有相同的属性或方法,那么该组件的选项将优先执行。

3. 使用Mixin的优点

  1. 代码复用:mixins允许我们将通用的逻辑抽离出来,重复使用。
  2. 易于维护:将通用逻辑抽离到mixins中,使得组件更简洁,逻辑更清晰。
  3. 灵活性:可以通过混入不同的mixins来为组件添加不同的功能。

4. 使用mixins

首先,我们需要创建一个mixins对象,包含我们想要复用的逻辑。然后,在组件中使用mixins选项来引入mixins。

步骤如下:文章来源地址https://www.toymoban.com/news/detail-816000.html

  1. 在创建src/mixins/xxx.js 文件;如:src/mixins/loginConfirm.js
// 创建一个名为`loginConfirm`的mixins对象
export default {
  data() {
    return {
      loading: false
    }
  },
  // 是否需要弹登录确认框
  // (1) 需要,返回 true,并直接弹出登录确认框
  // (2) 不需要,返回 false
  loginConfirm () {
    if (!this.$store.getters.token) {
      this.$dialog.confirm({
        title: '温馨提示',
        message: '此时需要先登录才能继续操作哦',
        confirmButtonText: '去登陆',
        cancelButtonText: '再逛逛'
      })
        .then(() => {
        // 如果希望,跳转到登录 => 登录后能回跳回来,需要在跳转去携带参数 (当前的路径地址)
        // this.$route.fullPath (会包含查询参数)
        this.$router.replace({
          path: '/login',
          query: {
            backUrl: this.$route.fullPath
          }
        })
      })
        .catch(() => {})
      return true
    }
    return false
  }
}
  1. 在需要用到的页面导入,并使用
<template>
  <div>
    <button @click="loadData">Load Data</button>
    <div v-if="loading">Loading...</div>
  </div>
</template>

<script>
// 1.导入
import loginConfirm from '@/mixins/loginConfirm'

export default {
  // 2.定义
  mixins: [loginConfirm],
  methods: {
		async addCart () {
      // 3.调用mixins中混入的方法
      if (this.loginConfirm()) {
        return
      }
      const { data } = await addCart(this.goodsId, this.addCount, this.detail.skuList[0].goods_sku_id)
      this.cartTotal = data.cartTotal
      this.$toast('加入购物车成功')
      this.showPannel = false
      console.log(this.cartTotal)
    }
}
</script>

5. 注意事项

  1. 合并策略:当组件和Mixin拥有同名选项时,这些选项将以恰当的方式进行“合并”。例如,两者都包含created钩子时,两者都会执行。但是,如果Mixin中的钩子在执行时有副作用(例如,改变组件的数据),那么这个行为可能会出乎意料。因此,当有冲突的选项时,应当小心处理。
  2. 谨慎使用:虽然Mixin可以提供代码复用的便利性,但是过度使用或者不恰当的使用可能会导致代码结构变得复杂和难以维护。在使用Mixin时,应当谨慎考虑其是否真的能够提高代码的可维护性和可读性。

到了这里,关于vue-Mixin-复用代码片段的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue.js 中的 mixin 和混入有什么区别?

    在 Vue.js 中,mixin 和混入是两个常用的概念,它们可以帮助我们实现代码的复用和组件间的通信。虽然它们的名字很相似,但它们的作用和用法有所不同。本文将介绍 mixin 和混入的区别,并通过代码示例来说明它们的用法。 mixin 是一种在 Vue.js 中实现代码复用的方式。它类似

    2024年02月09日
    浏览(41)
  • 持续不断更新中... 自己整理的一些前端知识点以及前端面试题,包括vue2,vue3,js,ts,css,微信小程序等

    答: 在普通的前端项目工程中,在script标签中增加setup即可使用api 使用setup()钩子函数 答: 不要在计算属性中进行异步请求或者更改DOM 不要直接修改computed的值 区别: 计算属性值基于其响应式依赖被缓存,意思就是只要他之前的依赖不发生变化,那么调用他只会返回之前缓

    2024年02月11日
    浏览(63)
  • Vue Mixin 代码重用与逻辑共享

    在当今Web开发领域中,构建交互性强、可复用且易于维护的用户界面是至关重要的。而Vue.js作为一款现代化且流行的JavaScript框架,正是为了满足这些需求而诞生。它采用了MVVM架构模式,并通过数据驱动和组件化的方式,使我们能够更轻松地构建出优雅而高效的Web应用程序。

    2024年01月17日
    浏览(50)
  • Vue2-配置脚手架、分析脚手架、render函数、ref属性、props配置项、mixin配置项、scoped样式、插件

    🥔:总有一段付出了没有回报的日子 是在扎根 更多Vue知识请点击——Vue.js Vue CLI(Vue Command Line Interface)Vue脚手架,Vue官方提供的标准化开发工具(开发平台) 安装node.js——可以查看此教程 第一步:输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站,全局安装

    2024年02月12日
    浏览(68)
  • Vue入门六(前端路由的概念与原理|Vue-router简单使用|登录跳转案例|scoped样式|混入(mixin)|插件)

    路由(英文:router)就是对应关系 SPA指的是一个web网站只有一个唯一的一个HTML页面, 所有组件的展示与切换 都在唯一的一个页面内完成。 此时, 不同组件之间的切换 需要通过 前端路由 来实现 总结:在SPA项目中, 不同功能之间的切换 ,要 依赖于前端路由 来完成 通俗移动

    2024年01月22日
    浏览(46)
  • 【手机号验证/前端】Vue2+elementUI编写一个手机号验证码登录页面,路由式开发(附完整代码)

    目录 效果图: 一、template部分 二、style样式 三、script部分 1.先对手机号的格式进行一个判断 2.接下来就是表单验证规则rules 3.最后就是methods了 (1)首先我们给获取验证码绑定一个方法 (2)然后封装一个axios接口,方便后面测试联调(这部分每个人封装的都不一样) (3)然

    2024年02月17日
    浏览(55)
  • 修改vscode内置Vue VSCode Snippets(代码片段)

    打开插件文件夹  文件夹名是 \\\" 作者名.vscode-插件名-版本号 \\\"组成的. C:UsersAdministrator.vscodeextensionssdras.vue-vscode-snippets-3.1.1snippets 打开vue.json \\\"prefix\\\": \\\"vbase\\\" 就是代码块的,输入vbase就会提示代码块                 上面的TT就是修改后的效果 3.增加自己代码填 保存

    2024年02月01日
    浏览(44)
  • VScode快速生成Vue3组件模板(代码片段&插件)

    方法一:配置用户代码片段 好处:可以完全按照个人习惯设置。 1、打开设置里的用户代码片段 2、找到vue.json 3、配置如下: 4、使用:输入vue回车生成 方法二:使用Vue VSCode Snippets插件 好处:安装即用,生成默认模板。 1、下载Vue VSCode Snippets插件并启用 2、使用:输入vue回车

    2024年02月14日
    浏览(42)
  • vue-codemirror实现一个前端代码在线编辑器,可处理 HTML,VUE,JS,CSS代码在线编辑

    先找个目录创建一个vue项目 例如 我们想要项目叫 editor 在终端执行 2和3其实都可以 但个人建议 最近还是2会更稳定一些 在终端执行 引入依赖包 然后在项目src目录下创建 utils 文件夹 里面创建一个setting.js 参考代码如下 然后 这边 调用组件的代码 因为项目也刚创 我直接写 s

    2024年02月15日
    浏览(55)
  • Vue3 复用代码

    在vue2中代码复用一般是 mixins 混入来实现但使用  mixins  进行代码复用会有一些问题 vue3虽然对  mixins  进行了保留但不再推荐使用。 不清晰的数据来源 :当使用了多个 mixin 时,实例上的数据属性来自哪个 mixin 变得不清晰,这使追溯实现和理解组件行为变得困难。 命名空间

    2024年02月07日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包