VueJS - Karışımlar

Karışımlar temelde bileşenlerle kullanılacak. Yeniden kullanılabilir kodu bileşenler arasında paylaşırlar. Bir bileşen mixin kullandığında, tüm mixin seçenekleri bileşen seçeneklerinin bir parçası haline gelir.

Misal

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

Çıktı

Bir karışım ve bir bileşen örtüşen seçenekler içerdiğinde, aşağıdaki örnekte gösterildiği gibi birleştirilirler.

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

Artık mixin ve vue örneği aynı yönteme sahip. Konsolda gördüğümüz çıktı budur. Görüldüğü gibi, vue ve mixin seçeneği birleştirilecek.

Yöntemlerde aynı işlev adına sahip olursak, ana vue örneği öncelik kazanır.

Misal

<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'in helloworld ve samemethod işlevlerinin tanımlandığı bir method özelliğine sahip olduğunu göreceğiz. Benzer şekilde, vue örneği, yine start ve samemethod iki yöntemin tanımlandığı bir method özelliğine sahiptir.

Aşağıdaki yöntemlerin her biri denir.

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

Yukarıda görüldüğü gibi helloworld, start ve samemethod işlevini adlandırdık. samemethod mixin'de de mevcuttur, ancak aşağıdaki konsolda görüldüğü gibi öncelik ana örneğe verilecektir.