VueJS - Mixin

上一个
下一个

Mixin 对于与组件一起使用基本有用。它们在组件中共享可重用代码。当组件使用 mixin 时，mixin 的所有选项都成为组件选项的一部分。

示例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding"></div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
            },
            methods : {
            },
         });
         var myMixin = {
            created: function () {
               this.startmixin()
            },
            methods: {
               startmixin: function () {
                  alert("Welcome  to mixin example");
               }
            }
         };
         var Component = Vue.extend({
            mixins: [myMixin]
         })
         var component = new Component();
      </script>
   </body>
</html>

输出

Mixins

当 mixin 和组件包含重叠选项时，它们会合并到一起，如下面的示例所示。

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding"></div>
      <script type = "text/javascript">
         var mixin = {
            created: function () {
               console.log('mixin called')
            }
         }
         new Vue({
            mixins: [mixin],
            created: function () {
               console.log('component called')
            }
         });
      </script>
   </body>
</html>

现在，mixin 和 vue 实例具有相同的方法 created。这是我们在控制台中看到的结果。如您所见，vue 的选项和 mixin 将被合并。

Mixin Overlapping

如果碰巧我们在 methods 中具有相同的方法名称，那么主要的 vue 实例将享有优先权。

示例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding"></div>
      <script type = "text/javascript">
         var mixin = {
            methods: {
               hellworld: function () {
                  console.log('In HelloWorld');
               },
               samemethod: function () {
                  console.log('Mixin:Same Method');
               }
            }
         };
         var vm = new Vue({
            mixins: [mixin],
            methods: {
               start: function () {
                  console.log('start method');
               },
               samemethod: function () {
                  console.log('Main: same method');
               }
            }
         });
         vm.hellworld();
         vm.start();
         vm.samemethod();
      </script>
   </body>
</html>

我们将看到 mixin 中有一个方法属性，其中定义了 helloworld 和 samemethod 函数。与此类似，vue 实例具有一个 methods 属性，其中定义了其他两个方法 start 和 samemethod。

将调用下面每种方法。

vm.hellworld(); // In HelloWorld
vm.start(); // start method
vm.samemethod(); // Main: same method

正如上面看到的那样，我们已调用 helloworld、start 和 samemethod 函数。samemethod 也存在于 mixin 中，但是将优先考虑主实例，如以下控制台所示。

Mixin as Method
打印页面
上一个
下一个
广告