vue用mixin实现共用数据方法

明知山

发布于 2020-12-01 10:50:29

6270

发布于 2020-12-01 10:50:29

文章被收录于专栏：前端开发随笔

在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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/11/27 ，如有侵权请联系 cloudcommunity@tencent.com 删除

mixins