博主首页

vue2的mixins

代码复用,可以使用引入的组件内的数据以及方法

复制代码
使用 Mixins 的步骤
定义 Mixin:
创建一个包含共享选项的对象。例如,定义一个 myMixin.js 文件:

// myMixin.js
export default {
  data() {
    return {
      mixinData: 'This is mixin data'
    };
  },
  methods: {
    mixinMethod() {
      console.log('This is a method from the mixin');
    }
  },
  created() {
    console.log('Mixin created hook');
  }
};

在组件中引入 Mixin:
在你的 Vue 组件中,使用 mixins 选项引入这个 mixin:

<template>
  <div>
    <h1>{{ mixinData }}</h1>
    <button @click="mixinMethod">Call Mixin Method</button>
  </div>
</template>

<script>
import myMixin from './myMixin';

export default {
  mixins: [myMixin],
  data() {
    return {
      componentData: 'This is component data'
    };
  },
  created() {
    console.log('Component created hook');
  }
};
</script>
复制代码

 

posted @   笑~笑  阅读(14)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
点击右上角即可分享
微信分享提示