Vue2基础篇-24-mixin(混入)

最新推荐文章于 2025-06-04 01:29:06 发布

Alan0517

最新推荐文章于 2025-06-04 01:29:06 发布

阅读量415

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Hmj050117/article/details/128240064

Vue2+Ts-基础篇专栏收录该内容

40 篇文章

订阅专栏

本文介绍Vue.js中混入（mixins）的概念及使用方法。通过混入可以复用跨组件的逻辑，包括数据和方法等。文章展示了如何定义混入，并提供全局与局部使用的实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 简介

功能：可以把多个组件共用的配置提取成一个混入对象
使用方式：

第一步定义混合：
```
{
    data(){....},
    methods:{....}
    ....
}
```
第二步使用混入：

全局混入：Vue.mixin(xxx)
局部混入：mixins:['xxx']

2. demo

1. 定义混入

export const aaa = {
    methods: {
        showName() {
            alert(this.name)
        },
    }
}

2. 全局使用混入(可选)

// 引入Vue
import Vue from "vue";
// 引入App
import App from "./App.vue"

//全局引入混合js
// import { aaa } from './mixin'
// Vue.mixin(aaa)

// 关闭Vue的生产提示
Vue.config.productionTip = false

// 创建Vm
new Vue({
    el: "#app",
    render: h => h(App)
})

3. 使用混入

<template>
  <div>
    <h2>{{ address }}</h2>
    <h2 @click="showName">{{ name }}</h2>
  </div>
</template>
<script>
import { aaa } from "../mixin.js";
export default {
  name: "School",
  data() {
    return {
      address: "张江",
      name: "叮咚买菜",
    };
  },
  // methods: {
  //   showName() {
  //     alert(this.name)
  //   },
  // },
  mixins: [aaa],
};
</script>