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>अब मिक्सिन और वीयूई उदाहरण में एक ही विधि बनाई गई है। यह वह आउटपुट है जो हम कंसोल में देखते हैं। जैसा कि देखा गया है, वाउ और मिक्सिन के विकल्प को मिला दिया जाएगा।
यदि हम विधियों में समान फ़ंक्शन नाम रखते हैं, तो मुख्य प्रतिज्ञा उदाहरण प्राथमिकता लेगा।
उदाहरण
<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>हम देखेंगे कि मिक्सिन में एक मेथड प्रॉपर्टी होती है जिसमें हेलोवर्ल्ड और सैमेथोड फ़ंक्शन परिभाषित होते हैं। इसी तरह, vue उदाहरण में एक तरीके की संपत्ति होती है जिसमें फिर से दो विधियों को प्रारंभ और समिमेथोड परिभाषित किया जाता है।
निम्नलिखित विधियों में से प्रत्येक को कहा जाता है।
vm.hellworld(); // In HelloWorld
vm.start(); // start method
vm.samemethod(); // Main: same methodजैसा कि ऊपर देखा गया है, हमने हेलोवर्ल्ड, स्टार्ट, और सेमेथोड फ़ंक्शन को बुलाया है। समिमेथोड भी मिक्सिन में मौजूद है, हालांकि, मुख्य उदाहरण के लिए प्राथमिकता दी जाएगी, जैसा कि निम्नलिखित कंसोल में देखा गया है।
