जैसा कि VueCONF US 2019 में क्रिस फ्रिट्ज़ (Vue.js Core Team Emeriti ) ने उल्लेख किया है
अगर हमने किआ दर्ज किया था .nativeऔर फिर बेस इनपुट के मूल तत्व को इनपुट से बदलकर अचानक इस घटक को तोड़ दिया गया है और यह स्पष्ट नहीं है और वास्तव में, आप इसे तुरंत पकड़ भी नहीं सकते हैं जब तक कि आपके पास वास्तव में अच्छा परीक्षण न हो। इसके बजाय आप वर्तमान में विचार कर रहे.native संशोधक के उपयोग से बचें, जो Vue 3 में हटाए जाएंगे, आप स्पष्ट रूप से यह परिभाषित कर पाएंगे कि माता-पिता को इस बात की परवाह हो सकती है कि कौन से तत्व श्रोताओं के लिए जोड़े गए हैं ...
Vue 2 के साथ
का उपयोग कर $listeners:
इसलिए, यदि आप Vue 2 का उपयोग कर रहे हैं, तो इस समस्या को हल करने के लिए एक बेहतर विकल्प एक पूरी तरह से पारदर्शी आवरण तर्क का उपयोग करना होगा । इसके लिए Vue एक $listenersसंपत्ति प्रदान करता है जिसमें घटक पर उपयोग किए जा रहे श्रोताओं का एक ऑब्जेक्ट होता है। उदाहरण के लिए:
{
focus: function (event) { /* ... */ }
input: function (value) { /* ... */ },
}
और फिर हमें बस घटक की तरह जोड़ना v-on="$listeners"होगा test:
Test.vue (बाल घटक)
<template>
<div v-on="$listeners">
click here
</div>
</template>
अब <test>घटक पूरी तरह से पारदर्शी आवरण है , जिसका अर्थ है कि यह बिल्कुल एक सामान्य <div>तत्व की तरह उपयोग किया जा सकता है : सभी श्रोता बिना .nativeसंशोधक के काम करेंगे ।
डेमो:
Vue.component('test', {
template: `
<div class="child" v-on="$listeners">
Click here
</div>`
})
new Vue({
el: "#myApp",
data: {},
methods: {
testFunction: function(event) {
console.log('test clicked')
}
}
})
div.child{border:5px dotted orange; padding:20px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="myApp">
<test @click="testFunction"></test>
</div>
$emitविधि का उपयोग:
हम $emitइस उद्देश्य के लिए विधि का उपयोग भी कर सकते हैं , जो हमें मूल घटक में बाल घटकों की घटनाओं को सुनने में मदद करता है। इसके लिए, हमें सबसे पहले बाल घटक से एक कस्टम घटना का उत्सर्जन करना होगा :
Test.vue (बाल घटक)
<test @click="$emit('my-event')"></test>
महत्वपूर्ण: हमेशा ईवेंट नामों के लिए कबाब-केस का उपयोग करें। अधिक जानकारी के लिए और इस बिंदु को पुनः दर्ज करने के लिए कृपया इस उत्तर को देखें: VueJS घटक से अभिभावक के लिए गणना किए गए मान से गुजरता है ।
अब, हमें मूल घटक में इस उत्सर्जित कस्टम घटना को सुनना होगा:
App.vue
<test @my-event="testFunction"></test>
इसलिए, मूल रूप से v-on:clickया शॉर्टहैंड के बजाय @clickहम केवल v-on:my-eventया केवल उपयोग करेंगे @my-event।
डेमो:
Vue.component('test', {
template: `
<div class="child" @click="$emit('my-event')">
Click here
</div>`
})
new Vue({
el: "#myApp",
data: {},
methods: {
testFunction: function(event) {
console.log('test clicked')
}
}
})
div.child{border:5px dotted orange; padding:20px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="myApp">
<test @my-event="testFunction"></test>
</div>
Vue 3 के साथ
का उपयोग कर v-bind="$attrs":
Vue 3 कई मायनों में हमारे जीवन को बहुत आसान बनाने जा रहा है। इसके लिए उदाहरणों में से एक यह है कि यह हमें केवल उपयोग करके बहुत कम विन्यास के साथ एक सरल पारदर्शी आवरण बनाने में मदद करेगा v-bind="$attrs"। बाल घटकों पर इसका उपयोग करने से न केवल हमारे श्रोता सीधे माता-पिता से काम करेंगे, बल्कि किसी अन्य विशेषता भी <div>केवल एक सामान्य की तरह काम करेंगे ।
इसलिए, इस प्रश्न के संबंध में, हमें Vue 3 में कुछ भी अपडेट करने की आवश्यकता नहीं होगी और आपका कोड अभी भी ठीक काम करेगा <div>जैसा कि यहां मूल तत्व है और यह स्वचालित रूप से सभी बच्चे की घटनाओं को सुनेगा।
डेमो # 1:
const { createApp } = Vue;
const Test = {
template: `
<div class="child">
Click here
</div>`
};
const App = {
components: { Test },
setup() {
const testFunction = event => {
console.log("test clicked");
};
return { testFunction };
}
};
createApp(App).mount("#myApp");
div.child{border:5px dotted orange; padding:20px;}
<script src="//unpkg.com/vue@next"></script>
<div id="myApp">
<test v-on:click="testFunction"></test>
</div>
लेकिन नेस्टेड तत्वों के साथ जटिल घटकों के लिए, जहां हमें <input />मूल लेबल के बजाय विशेषताओं और घटनाओं को मुख्य रूप से लागू करने की आवश्यकता होती हैv-bind="$attrs"
डेमो # 2:
const { createApp } = Vue;
const BaseInput = {
props: ['label', 'value'],
template: `
<label>
{{ label }}
<input v-bind="$attrs">
</label>`
};
const App = {
components: { BaseInput },
setup() {
const search = event => {
console.clear();
console.log("Searching...", event.target.value);
};
return { search };
}
};
createApp(App).mount("#myApp");
input{padding:8px;}
<script src="//unpkg.com/vue@next"></script>
<div id="myApp">
<base-input
label="Search: "
placeholder="Search"
@keyup="search">
</base-input><br/>
</div>
@click.native="testFunction"