ক্রিস ফ্রিটজ (Vue.js কোর টিম ইমেরিটি ) VueCONF ইউএস 2019 তে উল্লিখিত হিসাবে
যদি আমাদের কিয়া প্রবেশ করানো হয় .nativeএবং তারপরে বেস ইনপুটটির মূল উপাদানটি একটি ইনপুট থেকে একটি লেবেলে পরিবর্তিত হয়ে যায় হঠাৎ এই উপাদানটি ভেঙে যায় এবং এটি সুস্পষ্ট নয় এবং বাস্তবে, আপনি যদি সত্যিই ভাল পরীক্ষা না করেন তবে আপনি ঠিক এখনই এটি ধরতে পারবেন না। পরিবর্তে আমি বর্তমানে একটি অ্যান্টি-প্যাটার্নটিকে বিবেচনা করে যে .nativeপরিমার্জনকারীটিকে বিবেচনা করি তা ভ্যু 3 এ মুছে ফেলা হবে আপনি এটিকে পরিষ্কারভাবে ব্যাখ্যা করতে সক্ষম হবেন যে পিতামাতাকে যত্ন নিতে পারে যে কোন উপাদান শোনার সাথে যুক্ত হবে ...
ভ্যু 2 সহ
ব্যবহার $listeners :
সুতরাং, আপনি যদি এই সমস্যাটি সমাধানের জন্য ভ্যু 2 ব্যবহার করেন তবে এটি একটি সম্পূর্ণ স্বচ্ছ র্যাপার যুক্তি ব্যবহার করা। এর জন্য ভ্যু $listenersউপাদানটিতে শ্রোতার একটি উপাদান যুক্ত একটি সম্পত্তি সরবরাহ করে । উদাহরণ স্বরূপ:
{
focus: function (event) { /* ... */ }
input: function (value) { /* ... */ },
}
এবং তারপরে আমাদের কেবলমাত্র উপাদানটি যুক্ত v-on="$listeners"করতে হবে test:
পরীক্ষা.ভ্যু (শিশু উপাদান)
<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 @click="$emit('my-event')"></test>
গুরুত্বপূর্ণ: ইভেন্টের নামের জন্য সর্বদা কাবাব-কেস ব্যবহার করুন। আরও তথ্যের জন্য এবং ডেমোটি এই পয়েন্টটিতে রেজিস্ট্রেশন করার জন্য দয়া করে এই উত্তরটি দেখুন: ভ্যুজেএস উপাদান থেকে পিতামাতার কাছে গণিত মান পাস করছে ।
এখন, আমাদের কেবল পিতামাতার উপাদানগুলিতে এই নির্গত কাস্টম ইভেন্টটি শুনতে হবে:
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>
ভ্যু 3 সহ
ব্যবহার v-bind="$attrs" :
ভ্যু 3 আমাদের জীবনকে বিভিন্ন উপায়ে আরও সহজ করে তুলছে। এর উদাহরণগুলির মধ্যে একটি হ'ল এটি আমাদের ব্যবহার করে খুব কম কনফিগারেশন সহ একটি সহজ স্বচ্ছ র্যাপার তৈরি করতে সহায়তা করবে v-bind="$attrs"। এটি শিশু উপাদানগুলিতে ব্যবহার করে আমাদের শ্রোতা কেবল পিতামাতার সরাসরি কাজ করবে না তবে অন্য কোনও বৈশিষ্ট্যও এটি স্বাভাবিকের মতো কাজ করবে<div> ।
সুতরাং, এই প্রশ্নের প্রসঙ্গে, আমাদের ভ্যূ 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"