Vuejs进阶知识(十六)【mixin】

怼烎@ 2021-06-26 16:06 470阅读 0赞

`Mixin`是一种更好的复用代码的模式.

我们知道 `java` , `Object C` 中的 `interface` , `implements`, `extends` 等关键字的意义,就是为了让代码可以复用、继承.

但是这几种方法, 都理解起来很不直观, 给人一种拐弯抹角的感觉. 特别是像我这样很不习惯 “设计模式”的人。

在`js, ruby`等动态语言中, 我们如果要复用代码的话,直接使用 `mixin` 就好了.

## `Mixin` 的 概念 ##

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

我们下面看一下在 `Vuejs` 中如何使用`mixin` 这种强大的工具。

## 建立一个`Mixin`文件 ##

可以在 `src/mixin` 目录下创建, 例如:

文件: `src/mixin/common_hi.js`:

export default { 
      methods: { 
        hi: function(name){ 
          return "你好, " + name;
        }
      }
    }

## 使用 ##

`Mixin`使用起来很简单,在对应的 `js`文件, 或者 `vue`文件的`<script>`代码中引用即可.

例如,新建一个`vue`文件:

`src/components/SayHiFromMixin.vue`, 内容如下:

<template>
      <div>
        {% raw %}{
       {
       {% endraw %}hi("from view")}}
      </div>
    </template>
    
    <script> import CommonHi from '@/mixins/common_hi.js' export default { mixins: [CommonHi], mounted() { alert( this.hi('from script code')) } } </script>

注意:

*  使用的时候, `mixins: [CommonHi]` 这里的是中括号,表示是数组.
 *  在`js`代码中调用的话, 需要带有`this`关键字,例如: `this.hi()`

路由如下:

import SayHiFromMixin from '@/components/SayHiFromMixin'
    
    export default new Router({ 
      routes: [
        { 
          path: '/say_hi_from_mixin',
          name: 'SayHiFromMixin',
          component: SayHiFromMixin
        }
      ]
    } )

运行效果如下:

![在这里插入图片描述][20181225221658561.png]

[20181225221658561.png]: /images/20210626/eb28407f1cfc4227b80a4a319240aac9.png