Vue--mixin(混入)--使用/教程/实例

末蓝、 2023-10-01 12:30 1阅读 0赞

原文网址：[Vue--mixin(混入)--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vue--mixin_--_IT_-CSDN]

## 简介 ##

**说明**

本文用示例介绍Vue的mixin（mixins）的用法。

mixin中文为：混入。

**官网**

[混入 — Vue.js][_ Vue.js]

**mixin简介**

我们可以将一段公用的JS写到一个单独的JS文件，用到这个JS的可以直接通过mixin来引入。比如：要测试组件的生命周期，可以将生命周期钩子函数单独写为一个LifeCycle.js，然后用到的组件通过mixin来引入。

Mixin是一种更好的复用代码的模式。java , Object C 中的 interface , implements, extends 等关键字的意义，就是为了让代码可以复用、继承。同样的，在vue中，用mixin来实现可复用。

Mixin 实际上是利用语言的特性（关键字），以更加简洁易懂的方式，实现了 “设计模式”中的 “组合模式”。 可以定义一个公共的类，这个类就叫做”mixin”。然后让其他的类，通过“include” 语言特性包含mixin，直接具备了 mixin 所具备的各种方法、数据等。

## 示例 ##

### 代码 ###

**mixin**

mixins/SayHello.js

export default {
      data() {
        return {
          mixinName: "SayHello.js"
        }
      },
      methods: {
        sayHello(name){
          return "hello," + name;
        }
      }
    }

**页面（组件）**

components/CompA.vue

<template>
      <div class="compA">
        <p>{
       { mixinName + ": " + sayHello(name) }}</p>
      </div>
    </template>
    
    <script>
    import SayHello from "@/mixins/SayHello";
    
    export default {
      mixins: [SayHello],
      data() {
        return {
          name: 'Tony'
        }
      }
    }
    </script>
    
    <style scoped>
    </style>

**路由**

router/index.js

import Vue from 'vue'
    import Router from 'vue-router'
    import CompA from "@/components/CompA";
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/compA',
          name: 'compA',
          component: CompA
        }
      ]
    })

### **测试** ###

访问：[http://localhost:8080/\#/compA][http_localhost_8080_compA]

![20201207000046586.png][]

## 其他网址 ##

[Vue混合mixins - 小火柴的蓝色理想 - 博客园][Vue_mixins - _ -]

[Vue--mixin_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122417995
[_ Vue.js]: https://cn.vuejs.org/v2/guide/mixins.html
[http_localhost_8080_compA]: http://localhost:8080/#/compA
[20201207000046586.png]: https://img-blog.csdnimg.cn/20201207000046586.png
[Vue_mixins - _ -]: https://www.cnblogs.com/xiaohuochai/p/7519136.html