什么是混入（mixin），Vue混入的用法

在实际项目中，有很多组件的功能或特征是重复的。Vue.js 提供了复用和组合机制，能将这些公共的特征和功能抽取出来，再混入（集成）不同的对象中去。

混入（mixin）提供了一种非常灵活的方式，来分发 Vue.js 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

在 myMixin 中定义 created 构造函数，同时在 methods 中定义一个 hello 函数。通过 Vue.extend() 函数，将 myMixin 对象混入到一个新的 Component 对象中，在 Component 的实例中，就包含了 myMixin 中定义的内容，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入 Vue.js -->
  <script src="../static/js/Vue.js" type="text/JavaScript"></script>
  <title>Demo vue</title>
</head>
<body>
  <!-- 定义 Vue.js 的视图 -->
  <div id="app"></div>

  <script type="text/JavaScript">
    let myMixin = {
      created: function() {
        this.hello();
      },
      methods: {
        hello: function() {
          console.log('hello, my mixins');
        }
      }
    };
    let Component = Vue.extend({
      mixins: [myMixin],
    });
    let instance = new Component();
  </script>
</body>
</html>

浏览器的 console 会输出"hello，my mixins"内容，说明 Component 对象中，混入了定义在 myMixin 中的 created 钩子函数和定义在 methods 中的 hello 函数。

什么是混入（mixin），Vue混入的用法

相关文章