VueJS – Mixins混入(15)

作者 : 慕源网 本文共1713个字,预计阅读时间需要5分钟 发布时间: 2021-11-18 共146人阅读

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>

输出

VueJS - Mixins混入(15)

当 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 实例创建了相同的方法。这是我们在控制台中看到的输出。可以看到,vue 和 mixin 的选项将被合并。

VueJS - Mixins混入(15)

如果我们在方法中碰巧有相同的函数名,那么主 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 有一个 method 属性,其中定义了 helloworld 和 samemethod 函数。类似地,vue 实例有一个 methods 属性,其中又定义了两个方法 start 和 samemethod。

调用以下每个方法。

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

如上所示,我们调用了 helloworld、start 和 samemethod 函数。mixin 中也存在相同的方法,但是,将优先考虑主实例,如以下控制台所示。

VueJS - Mixins混入(15)


慕源网 » VueJS – Mixins混入(15)

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录