Vue.js
mixins

ग्लोबल मिक्सिन

आप विश्व स्तर पर एक मिक्सिन भी लगा सकते हैं। सावधानी बरतें! एक बार जब आप विश्व स्तर पर एक मिक्सिन लागू करते हैं, तो यह बाद में बनाए गए प्रत्येक Vue उदाहरण को प्रभावित करेगा। ठीक से उपयोग किए जाने पर, इसका उपयोग कस्टम विकल्पों के लिए प्रोसेसिंग लॉजिक को इंजेक्ट करने के लिए किया जा सकता है:

// inject a handler for `myOption` custom option
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// -> "hello!"

वैश्विक मिश्रणों का उपयोग बड़े पैमाने पर और सावधानी से करें, क्योंकि यह तीसरे पक्ष के घटकों सहित बनाए गए हर एक वीयू उदाहरण को प्रभावित करता है। ज्यादातर मामलों में, आपको इसे केवल उपर्युक्त उदाहरण में दिखाए गए कस्टम विकल्प हैंडलिंग के लिए उपयोग करना चाहिए।

कस्टम विकल्प मर्ज रणनीतियाँ

जब कस्टम विकल्प मर्ज किए जाते हैं, तो वे डिफ़ॉल्ट रणनीति का उपयोग करते हैं, जो बस मौजूदा मूल्य को अधिलेखित करता है। यदि आप चाहते हैं कि कस्टम तर्क को कस्टम लॉजिक का उपयोग करके मर्ज किया जाए, तो आपको Vue.config.optionMergeStrategies एक फ़ंक्शन संलग्न करना Vue.config.optionMergeStrategies :

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
  // return mergedVal
}

अधिकांश ऑब्जेक्ट-आधारित विकल्पों के लिए, आप methods द्वारा उपयोग की जाने वाली एक ही रणनीति का उपयोग कर सकते हैं:

var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods

मूल बातें

मिक्स Vue घटकों के लिए पुन: प्रयोज्य कार्यात्मकताओं को वितरित करने का एक लचीला तरीका है। एक मिश्रण वस्तु में किसी भी घटक विकल्प हो सकते हैं। जब एक घटक एक मिश्रण का उपयोग करता है, तो मिश्रक के सभी विकल्प घटक के अपने विकल्पों में "मिश्रित" होंगे।

// define a mixin object
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// define a component that uses this mixin
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // -> "hello from mixin!"

विकल्प विलय

जब एक मिश्रण और घटक में अतिव्यापी विकल्प होते हैं, तो उन्हें उपयुक्त रणनीतियों का उपयोग करके "विलय" किया जाएगा। उदाहरण के लिए, एक ही नाम के साथ हुक फ़ंक्शंस को एक सरणी में विलय कर दिया जाता है ताकि सभी को बुलाया जाएगा। इसके अलावा, मिक्सिन हुक को घटक के स्वयं के हुक से पहले बुलाया जाएगा:

var mixin = {
  created: function () {
    console.log('mixin hook called')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('component hook called')
  }
})

// -> "mixin hook called"
// -> "component hook called"

विकल्प जो ऑब्जेक्ट वैल्यू की अपेक्षा करते हैं, उदाहरण के methods , components और directives , उसी ऑब्जेक्ट में विलय कर दिए जाएंगे। घटक के विकल्प प्राथमिकता लेंगे जब इन वस्तुओं में परस्पर विरोधी कुंजी होगी:

var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})

vm.foo() // -> "foo"
vm.bar() // -> "bar"
vm.conflicting() // -> "from self"

ध्यान दें कि Vue.extend() में समान मर्ज रणनीतियों का उपयोग किया जाता है।