VueJS-ミックスイン

ミックスインは基本的にコンポーネントで使用されます。コンポーネント間で再利用可能なコードを共有します。コンポーネントがミックスインを使用する場合、ミックスインのすべてのオプションがコンポーネントオプションの一部になります。

例

<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>

出力

ミックスイン

ミックスインとコンポーネントに重複するオプションが含まれる場合、次の例に示すようにそれらはマージされます。

<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>

これで、ミックスインとvueインスタンスに同じメソッドが作成されました。これは、コンソールに表示される出力です。ご覧のとおり、vueとmixinのオプションはマージされます。

Mixin Overlapping

メソッドに同じ関数名がある場合、メインのvueインスタンスが優先されます。

例

image

<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関数が定義されているmethodプロパティがあります。同様に、vueインスタンスには、2つのメソッドがstartとsamemethodで定義されているmethodsプロパティがあります。

次の各メソッドが呼び出されます。

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

上記のように、helloworld、start、およびsamemethod関数を呼び出しました。同じメソッドがmixinにも存在しますが、次のコンソールに示すように、メインインスタンスが優先されます。

Mixin as Method

Vuejs-mixins

VueJS-ミックスイン

例

出力

例

目次