vue 3.x 中mixin封装公用方法应用方式

目录
  • mixin封装公用方法应用
  • vue3基础-mixin使用
    • mixin特点
    • 定义局部mixin
    • 定义全局mixin（不推荐）
    • 调整mixin中属性的优先级

mixin封装公用方法应用

在src下新建文件装载公用方法：mixin/baseMixin.js

const baseMixin = {
    data() {
        return {
            title: '这个是公用标题'
        }
    },
    methods: {
        onClick() {
            console.log('我被点击了')
        }
    }
}
export default baseMixin;

然后可以在需要调用的组件中调用：src/view/App.vue

<template>
  <div class="baseMixin">
    <h1>
        这个是调用复用标题: {{title}}
        // 渲染：这个是公用标题
       </h1> 
    <h2>
        <button @click="onClick">
            // 打印：我被点击了
            这个是复用方法
           </button>
    </h2>
  </div>
</template>
<script>
import baseMixin from '@/mixin/baseMixin'
    export default {
        mixins: [baseMixin],
        setup() {
            let text = '这个是vue3版本mixin的方法记录'
            return {
                text
            }
        }
    }
</script>

如果需要全局直接使用mixin的封装的话，在main.js里面申明就可以

import { createApp } from 'vue'
import App from './App.vue'
import baseMixin from './mixin/baseMixin'
createApp(App).mixin(baseMixin).mount('#app')

vue3基础-mixin使用

mixin特点

  • 组件 data 优先级 高于 mixin 的data优先级
  • 组件 methods 优先级 高于 mixin 的methods优先级
  • 声明周期函数，先执行 mixin 里面的，再执行组件里面的
  • 局部mixin,需要在组件中注册 mixins: [myMixin]
  • 全局mixin 无需在组件中注册，自动注入。

定义局部mixin

和定义局部组件类似,支持data,methods以及声明周期函数。

mixin.js

const myMixin = {
  data() {
    return {
      msg: 'hello vue3'
    }
  },
  created() {
    console.log('mixin created');
  },
  methods: {
    handleClick() {
      console.log('mixin', this.msg);
    }
  }
}

定义全局mixin（不推荐）

// 全局mixin 无需在组件中注册，自动注入。
app.mixin({
  mounted() {
    console.log('这是一个全局的mixin');
  }
})

调整mixin中属性的优先级

const myMixin = {
  msg: 'hello mixin ~'
}
// $options 组件注册的所有选项都会在 $options 中
const app = Vue.createApp({
  mixins: [myMixin],
  msg: 'hello app ~',
  template: `
    <div>
      {{ $options.msg }}  
    </div>`,
})
// ** 调整mixin中属性(如：msg)的优先级，使mixin的优先级高级组件的
app.config.optionMergeStrategies.msg = (mixinValue, appValue) => {
  return mixinValue || appValue;
}

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

赞 (0)

相关推荐

  • vue3  mixin 混入使用方法

    vue3  mixin 混入使用方法

    目录 一.mixin 如何使用 ? 二.mixin 使用时注意点 2.1.使用 mixin 对象时,组件内部和 mixin 包含相同选项,如何处理呢? 2.2.使用的 mixin 对象选项 和实例中的选项拥有相同的属性该如何处理? 2.3.mixin 对象也可以添加生命周期钩子函数 三.mixin 自定义属性 四.合并策略 五.全局配置 mixin vue 2 中采用选项式API 如: data.methods.watch.computed以及生命周期钩子函数等等. mixin 混入,提供了一种

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

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

  • Vue之封装公用变量以及实现方式

    阿西八!!!写久了Flutter,前端的知识真的是忘得差不多了,今天就来复习一下Vue中如何封装公用变量以及公用方法 以封装一个正则表达式为例! 第一步 创建我们的公用文件夹 我们来看一下utils.js中的代码 class PublicMethods{ constructor() { this.name = '公用变量' } verificationPhon(phone){ // 大陆手机号码11位数,匹配格式:前三位固定格式+后8位任意数 // 13+任意数 * 15+除4的任意数 * 18

  • vue 3.x 中mixin封装公用方法应用方式

    目录 mixin封装公用方法应用 vue3基础-mixin使用 mixin特点 定义局部mixin 定义全局mixin(不推荐) 调整mixin中属性的优先级 mixin封装公用方法应用 在src下新建文件装载公用方法:mixin/baseMixin.js const baseMixin = {     data() {         return {             title: '这个是公用标题'         }     },     methods: {         on

  • vue 2.x 中axios 封装的get 和post方法

    vue 2.x axios 封装的get 和post方法 import axios from 'axios' import qs from 'qs' export class HttpService { Get(url, data) { return new Promise((resolve, reject) => { axios.get(url, { params: data }).then((res) => { if (res) { //成功回调 resolve(res); } }).ca

  • vue cli webpack中使用sass的方法

    1:安装依赖 npm install sass-loader node-sass --save-dev 2:html中 修改style <style lang="sass"> /* write sass here */ </style> 3: 使用正常sass 语法 //但是会报错 <style lang="sass"> $highlight-color: #F90; $highlight-border: 1px solid $h

  • 在laravel框架中实现封装公共方法全局调用

    1. 创建 functions.php 在 app/Helpers/(目录可以自己随便来)下新建一个文件 functions.php,在内部补充如下代码: <?php /** * 公用的方法 返回json数据,进行信息的提示 * @param $status 状态 * @param string $message 提示信息 * @param array $data 返回数据 */ function showMsg($status,$message = '',$data = array()){ $

  • vue的keep-alive中使用EventBus的方法

    最近项目中由于列表居多且都做了下拉刷新上拉加载,所以就使用了keep-alive组件来缓存页面数据,但是当在其他页面做一些操作改变了列表数据,当来到列表的时候每次都要下拉刷新一下,体验不好,所以就使用到了EventBus,在需要更新的时候就用EventBus来刷新列表. 1.keep-alive组件 keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在页面渲染完毕后不会被渲染成一个DOM元素.但是对于展示型页面比较好用,表单类页面也会将所填

  • 浅谈vue在html中出现{{}}的原因及解决方式

    原因: 浏览器渲染机制,解析html结构 -> 加载外部脚本和样式表文件 -> 解析并执行脚本代码 -> 构造html dom模型 -> 加载图片等外部文件 -> 页面加载完毕. 初始化vue的js写在页面底部,也就是最后才执行js脚本. 所以页面从头到尾开始渲染时,渲染到标签时,由于vue还未初始化,所以就会显示类似这样的代码 <h2>{{courseName}}</h2> 当网速很慢的时候就看得比较清楚,可能会让用户误以为bug之类的,快一点的话就

  • VUE 3D轮播图封装实现方法

    VUE 3D轮播图封装实现方法

    本文为大家分享了VUE 3D轮播图封装的具体代码,供大家参考,具体内容如下 一.体验地址 VUE 3D轮播图 二.实现功能点 (1).无缝轮播 (2).进入变大.离开缩小(类3d切换效果) 三.js代码 <!--轮播图插件模板--> <template> </template> <script type="text/ecmascript-6"> import {swiper, swiperSlide} from 'vue-awesome-

  • Vue加载中动画组件使用方法详解

    Vue加载中动画组件使用方法详解

    本文实例为大家分享了Vue加载中动画组件的使用,供大家参考,具体内容如下 (模仿ant-design加载中样式)效果图如下: ①创建Loading.vue组件: <template>   <div class="m-spin-dot">     <span class="u-dot-item"></span>     <span class="u-dot-item"></span&

  • vue之项目中如何封装loading加载效果

    目录 vue封装loading加载效果 Loading.vue loading.js main.js中导入并使用 项目中使用Loading加载 总结 vue封装loading加载效果 使用两个文件,vue文件是loading加载效果页面,JS文件用于main.js中use,供全局使用 Loading.vue <template> <div v-if="show" class="loading-container"> <div class

随机推荐