首页 > 编程笔记 > JavaScript笔记 阅读：144

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

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

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

在 myMixin 中定义 created 构造函数，同时在 methods 中定义一个 hello 函数。通过 Vue.extend() 函数，将 myMixin 对象混入到一个新的 Component 对象中，在 Component 的实例中，就包含了 myMixin 中定义的内容，代码如下：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <!-- 引入 Vue.js -->
  8.   <script src="../static/js/Vue.js" type="text/JavaScript"></script>
  9.   <title>Demo vue</title>
  10. </head>
  11. <body>
  12.   <!-- 定义 Vue.js 的视图 -->
  13.   <div id="app"></div>
  14.  
  15.   <script type="text/JavaScript">
  16.     let myMixin = {
  17.       created: function() {
  18.         this.hello();
  19.       },
  20.       methods: {
  21.         hello: function() {
  22.           console.log('hello, my mixins');
  23.         }
  24.       }
  25.     };
  26.     let Component = Vue.extend({
  27.       mixins: [myMixin],
  28.     });
  29.     let instance = new Component();
  30.   </script>
  31. </body>
  32. </html>
浏览器的 console 会输出"hello，my mixins"内容，说明 Component 对象中，混入了定义在 myMixin 中的 created 钩子函数和定义在 methods 中的 hello 函数。

相关文章