vue用mixin实现共用数据方法

src目录新建一个mixins文件夹,里面新建index.js文件

这里写公共的值和方法

export const mixin = {
    
    
    data() {
    
    
        return {
    
    
            mixinData: 123
        }
    },
    methods: {
    
    
        mixinFunction() {
    
    
            console.log("这是来自mixin的方法")
        }
    }
}

在组件中引入

<template>
  <div></div>
</template>

<script>
import {
     
      mixin } from "../mixins";
export default {
     
     
  mixins: [mixin],
  data() {
     
     
    return {
     
     };
  },
  mounted() {
     
     
    console.log(this.mixinData); //这是来自mixin的值
    this.mixinFunction(); //这是来自mixin的方法
  },
};
</script>
<style lang="less" scoped>
</style>

猜你喜欢

转载自blog.csdn.net/AK852369/article/details/110221630