vue3和vue2中mixins的使用解析

目录
  • 前言
  • Vue2
    • 1、封装的mixin方法
    • 2、具体页面引用 abc.vue
    • 3、具体页面使用 abc.vue
  • vue3官方入口（个人建议，不要再mixin用setup）
    • 一、封装mixin里面具有setup
      • 具体步骤
    • 二、不需要在mixin里面使用setup  (官方支持用法)
      • 具体使用

前言

vue的mixins里面放公共的js方法，但是vue3之后使用方法还是有些改变，这里来罗列下他们的区别。

Vue2

1、封装的mixin方法

export const homeSensors = {
  mounted() {
    this.$sensors.track('teacherHomePageview')
  },
    methods:{
        abc(){
            alert(1)
        }
    }
}

2、具体页面引用 abc.vue

import { homeSensors } from '@/mixins/sensorsMixin'
export default {
  mixins: [taskAssign],

}

3、具体页面使用 abc.vue

created() {
    this.abc()   //mixin里面的具体方法
  },

vue3官方入口（个人建议，不要再mixin用setup）

一、封装mixin里面具有setup

注意：

vue3的官方统计mixin方法有两种，全局和具体组件使用，均没有支持在mixin的js文件中使用setup,    在里面直接写入setup阶段，是不能直接获取到的，如果我们想要用setup，需要换一种思路，引入js的思路

具体步骤

1、封装方法  common.js

//setup中调用的mixins方法
import { computed, ref } from 'vue'
export const common =  {
  alertCon(content) {
    if(content){
      alert(content)
    }else{
      alert(1)
    }
  },
  setup(){
    const count = ref(1)
    const plusOne = computed(() => count.value + 1)
    function hello(){
      console.log('hello mixin'+plusOne.value)
    }
    return{
      count,
      plusOne,
      hello
    }
  }
}

2、页面具体使用

// vue页面中引入
import {common} from '../../../mixins/common'
export default{
  setup(){
    common.alertCon()
    const {count,plusOne,hello} = common.setup()
    hello()
    console.log(count.value, plusOne.value)
  }
}

二、不需要在mixin里面使用setup  (官方支持用法)

官方入口：点我

Mixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项。

例子：

// 定义一个 mixin 对象
const myMixin = {
  created() {
    this.hello()
  },
  methods: {
    hello() {
      console.log('hello from mixin!')
    }
  }
}

// 定义一个使用此 mixin 对象的应用
const app = Vue.createApp({
  mixins: [myMixin]
})

app.mount('#mixins-basic') // => "hello from mixin!"

具体使用

1、封装方法  common.js

//setup中调用的mixins方法
import { computed, ref } from 'vue'
export const common =  {
   mounted(){
    alert('我是mounted的方法')
  },
}

2、页面具体使用

import {common} from '../../../mixins/common'
mixins: [common],

3、页面效果：刷新以后

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue mixins代码复用的项目实践

    目录 导语: 场景: 1. 代码里有很多当前组件需要的纯函数,methods过多 2. 举个例子你有一个组件需要抛出两个数据,直接的v-model不适用.需要采用$emit方法 3. 同理,可以通过这个方式复用很多data数据,避免模板化的声明 总结: 导语: 两年前来到新公司,开始使用vue开发,代码复用程度比较低.到后期大量的开发经验,以及看了一些设计模式类的书籍.才开始慢慢总结一些代码复用的经验.分享出来, PS: Vue版本2.6 场景: 1. 代码里有很多当前组件需要的纯函数,meth

  • vue中的mixins混入使用方法

    目录 作用 使用方法 全局混入 局部混入 作用 用简单的话去概括就是一种分发vue组件中的功能可以复用一个技术,使用这个技术我们可以把需要复用的内容封装成一个vue组件,方便下次使用方便 使用方法 首先在src中去创建一个自己的文件夹,然后把要封装的内容放入到这个文件夹,方便后续的调用 let mymixin={ methods:{ handleBtn(){ alert('封装的内容已经触发!') } } } export default mymixin 全局混入 全局混入就是我们可以把封装好的

  • vue 父子组件共用mixins的注意点

    vue 父子组件共用mixins的注意点

    目录 父子组件共用mixins的注意点 详解mixins混入使用 什么是Mixins? 什么时候使用Mixins? 如何创建Mixins? 如何使用Mixins? Mixins的特点 Mixins合并冲突 与vuex的区别 与公共组件的区别 父子组件共用mixins的注意点 父子组件正常引用(通过props传值):父子组件之间的关系是相互独立的 父子组件共用一个mixins:(在同一个作用域内,直接使用) 在开发过程中,会遇到tableData直接渲染的情况,数据量过大,则会拆分多个子组件,此时

  • vue中mixins的工具的封装方式

    vue中mixins的工具的封装方式

    目录 mixins工具的封装 vue的mixins的工具是什么? js工具代码 三.使用这个文件 vue组件封装及注意事项 调用的时候 我们已经会使用 父组件向子组件传数据了,那子组件如何来修改父组件的数据呢? mixins工具的封装 vue的mixins的工具是什么? 就是我们再写信息管理系统时,涉及到大量的增删查改调用后台接口的重复的方法,我们可以把这些方法集合起来直接作为一个js文件,后面可以直接引入,数据和方法都不需要声明,直接使用即可. 再概括一下,就是请求后台接口的方法的集合. js

  • 浅谈Vue3 Composition API如何替换Vue Mixins

    想在你的Vue组件之间共享代码?如果你熟悉Vue 2 则可能知道使用mixin,但是新的Composition API 提供了更好的解决方案. 在本文中,我们将研究mixins的缺点,并了解Composition API如何克服它们,并使Vue应用程序具有更大的可伸缩性. 回顾Mixins功能 让我们快速回顾一下mixins模式,因为对于下一部分我们将要讲到的内容,请务必将其放在首位. 通常,Vue组件是由一个JavaScript对象定义的,它具有表示我们所需功能的各种属性--诸如 data,m

  • vue中使用mixins/extends传入参数的方式

    目录 使用mixins/extends传入参数 vue mixins的原理 使用mixins/extends传入参数 最近做报表页面,基本都是列表页面,所以想用mixins. 但是接口的url不同,于是考虑怎么才能传入参数去适配各个页面. 后来发现mixin文件可以写个函数,接受传递过来的参数,然后return一个对象. 大概如下: mixin.js export default function(config) {     let {         listUrl="",    

  • vue中混入mixins的使用方法

    vue中混入mixins的使用方法

    目录 前言 使用方法 总结 前言 Vue中有一个设置项叫做混入 (mixins), 它的使用是用来做代码复用的.同时, 这个mixins 也分为局部混入和全局混入 vue中的解释是这样的,如果觉得语言枯燥的可以自行跳过嘿~ 混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项.应用场景 下面先说一下 mixins 的应用场景, 假设现在我们两个组件, 当这两个组件被点击时,

  • vue3和vue2中mixins的使用解析

    vue3和vue2中mixins的使用解析

    目录 前言 Vue2 1.封装的mixin方法 2.具体页面引用 abc.vue 3.具体页面使用 abc.vue vue3官方入口(个人建议,不要再mixin用setup) 一.封装mixin里面具有setup 具体步骤 二.不需要在mixin里面使用setup  (官方支持用法) 具体使用 前言 vue的mixins里面放公共的js方法,但是vue3之后使用方法还是有些改变,这里来罗列下他们的区别. Vue2 1.封装的mixin方法 export const homeSensors = {

  • 浅谈vue2的$refs在vue3组合式API中的替代方法

    浅谈vue2的$refs在vue3组合式API中的替代方法

    如果你有过vue2的项目开发经验,那么对$refs就很熟悉了.由于vue3的断崖式的升级,在vue3中如何使用$refs呢?想必有遇到过类似的问题,我也有一样的疑惑.通过搜索引擎和github,基本掌握如何使用$refs.在vue3中使用组合式API的函数ref来代替静态或者动态html元素的应用. 最近业余在学习vue3项目<蜡笔(Crayon)管理模板:Vue3 + Vuex4 + Ant Design2>开发,这两天迭代推进了一点,实现了chart图表组件,写文章的时候发现提交代码的co

  • vue3:vue2中protoType更改为config.globalProperties问题

    vue3:vue2中protoType更改为config.globalProperties问题

    目录 protoType替换为config.globalProperties Vue3 vs Vue2 Vue3 的新组件 文件对比 全局 API protoType替换为config.globalProperties 原文地址 在main.js中: vue2 Vue.prototype.$verson = '1.0.0' 使用 this.$verson vue3 Vue.config.globalProperties.$verson = '1.0.0' 使用 <script setup lan

  • vue3 与 vue2 优点对比汇总

    目录 优点1:diff算法的优化 优点2:hoistStatic 静态提升 优点3:cacheHandlers 事件侦听器缓存 优点4:ssr渲染 优点5:更好的Ts支持 优点6:Compostion API: 组合API/注入API 优点7:更先进的组件 优点8:自定义渲染API 优点9:按需编译,体积比vue2.x更小 优点10:支持多根节点组件 ​​​​​​摘要: Vue3新版本的理念成型于 2018 年末,当时的 Vue 2 已经有两岁半了.比起通用软件的生命周期来这好像也没那么久,Vu

  • 详解如何在Vue2中实现组件props双向绑定

    详解如何在Vue2中实现组件props双向绑定

    Vue学习笔记-3 前言 Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props的双向绑定功能. 以往在Vue1.x中利用props的twoWay和.sync绑定修饰符就可以实现props的双向绑定功能,但是在Vue2中彻底废弃了此功能,如果需要双向绑定需要自己来实现. Vue2的组件props通信方式 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribu

  • vue2中使用sass并配置全局的sass样式变量的方法

    Sass语言 Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量.嵌套规则.mixins.导入等css没有但开发语言(如Java.C#.Ruby等)有的一些特性,并且完全兼容CSS语法.Sass有助于保持大型样式表结构良好.       Sass有两种语法. 一种称为SCSS,是一个CSS3语法的扩充版本,也就是说,所有符合CSS3语法的样式表也都是具有相同语法意义的SCSS文件,SCSS样式表文件要以.scss扩展名结尾.在vue中,我们可以使用<style la

  • 解决vue2中使用elementUi打包报错的问题

    bug1.找不到element-ui/lib/theme-default/index.css 解决:修改路径为 element-ui/lib/theme-chalk/index.css 原因:elementUi升级时遗留bug bug2: ERROR in static/js/app.77ab8a3664d32f2b9c76.js from UglifyJs Unexpected token: operator (>) [./~/element-ui/src/mixins/emitter.js:

  • Vue2中无法检测到数组变动的原因及解决

    Vue2中无法检测到数组变动的原因及解决

    目录 解决方法 由于JavaScript 的限制,Vue 不能检测以下数组的变动: 当利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue 当修改数组的长度时,例如:vm.items.length = newLength var vm = new Vue({ data: { items: ['a', 'b', 'c'] } }) vm.items[1] = 'x' // 不是响应性的 vm.items.length = 2 // 不是响应性的 解决

  • Vue3对比Vue2的优点总结

    1.为什么要有vue3 我们使用vue2常常会遇到一些体验不太好的地方,比如: 随着功能的增长,需求的增加,复杂组件的代码越来越难以维护,逻辑混乱,虽然vue2也有一些复用的方法,但是都存在一定的弊端,比如我们常常用的Mixin,特别容易发生命名冲突,暴露出来的变量意图不是很明显,重用到其他组件容易冲突. vue2对于typeScript的支持非常有限,没有考虑到ts的集成. vue3的出现就是为了解决vue2的弊端,其composition API很好的解决了逻辑复用的问题,而且vue3源码就

  • 图文详解如何在vue3+vite项目中使用svg

    图文详解如何在vue3+vite项目中使用svg

    今天在vue3+vite项目练习中,在使用svg时,发现之前的写法不能用,之前的使用方法参考vue2中优雅的使用svg const req = require.context('./icons/svg', false, /\.svg$/) const requireAll = requireContent => requireContent.keys().map(requireContent) requireAll(req) 然后就各种资料查找,终于实现了,废话不多说,直接上代码: stept1

随机推荐