Vue <Teleport> Component

Vue <টেলিপোর্ট> উপাদান

<টেলিপোর্ট> উপাদানটি Vue-এর সবচেয়ে অনন্য অন্তর্নির্মিত উপাদানগুলির মধ্যে একটি। এটি একটি উপাদানকে DOM কাঠামোর এক অবস্থান থেকে অন্য অবস্থানে "টেলিপোর্ট" করতে সক্ষম করে, উপাদানগুলিকে DOM কাঠামোর সীমানার বাইরে স্থাপন করার অনুমতি দেয়।

🚀প্রধান আবেদন:

<Teleport> মডেল, টুলটিপস, নেভিগেশন মেনু এবং অন্যান্য UI উপাদানগুলির জন্য আদর্শ যা তাদের মূল উপাদানগুলির উপরে রেন্ডার করা প্রয়োজন৷

উদাহরণ

আপনার নিজস্ব Vue সার্ভার পান

অন্তর্নির্মিত <Teleport> উপাদান ব্যবহার করে একটি <div> উপাদানকে <body> এর রুটে সরাতে:

<Teleport to="body">
  <div id="redDiv">Hello!</div>
</Teleport>

নীচে আরো উদাহরণ দেখুন.

সংজ্ঞা এবং প্রয়োগ

to prop সহ অন্তর্নির্মিত <Teleport> উপাদানটি বর্তমান HTML কাঠামোর বাইরে একটি উপাদানকে পপ করতে এবং এটিকে DOM-এ ইতিমধ্যে মাউন্ট করা অন্য একটি উপাদানে সন্নিবেশ করতে ব্যবহৃত হয়।

আপনাকে পৃষ্ঠাটিতে ডান-ক্লিক করতে হবে এবং <টেলিপোর্ট> এলিমেন্টের সাথে একটি উপাদান আসলে কোথাও সরানো হয়েছে কিনা তা দেখতে হবে।

📍গুরুত্বপূর্ণ নোট:

ইতিমধ্যেই লক্ষ্যে মাউন্ট করা অন্যান্য উপাদানের পরে টেলিপোর্ট করা উপাদানটি শেষ হয়৷ তাই যদি একাধিক উপাদান একই লক্ষ্যে টেলিপোর্ট করা হয়, শেষ টেলিপোর্ট করা উপাদানটি অন্যান্য টেলিপোর্ট করা উপাদানগুলির নীচে শেষ হয়।

যদি <Teleport> একটি কম্পোনেন্ট সরানোর জন্য ব্যবহার করা হয়, তাহলে সেই কম্পোনেন্টের সাথে প্রোভাইড/ইনজেক্ট বা প্রপ/এমিটের মিথস্ক্রিয়া আগের মতই কাজ করতে থাকবে, যেন কম্পোনেন্টটি সরানো হয়নি।

প্রপস

প্রপ	ব্যাখ্যা
to	প্রয়োজনীয় স্ট্রিং গন্তব্যের নাম উল্লেখ করুন
disabled	ঐচ্ছিক। বুলিয়ান। টেলিপোর্ট ফাংশন নিষ্ক্রিয় করা উচিত কিনা তা নির্দিষ্ট করুন

🎯সমর্থন করার লক্ষ্যগুলি:

'টু' প্রপের জন্য সাধারণ লক্ষ্যগুলি হল: 'বডি', '#অ্যাপ', '.কন্টেইনার', বা অন্য কোনও বৈধ সিএসএস নির্বাচক৷ লক্ষ্য উপাদানটি অবশ্যই DOM-এ ইতিমধ্যেই বিদ্যমান থাকতে হবে।

আরো উদাহরণ

উদাহরণ 1

CompOne.vue:

<template>
  <div>
    <h2>Component</h2>
    <p>This is the inside of the component.</p>
    <Teleport to="body">
      <div 
        id="redDiv" 
        @click="toggleVal = !toggleVal" 
        :style="{ backgroundColor: bgColor }"
      >
        Hello!<br>
        Click me!
      </div>
    </Teleport>
  </div>
</template>

<script>
export default {
  data() {
    return {
      toggleVal: true
    }
  },
  computed: {
    bgColor() {
      if (this.toggleVal) {
        return 'lightpink'
      }
      else {
        return 'lightgreen'
      }
    }
  }
}
</script>

<style scoped>
#redDiv {
  margin: 10px;
  padding: 10px;
  display: inline-block;
}

#redDiv:hover {
  cursor: pointer;
}
</style>

উদাহরণ 2

বুলিয়ান অক্ষম প্রপ একটি বোতাম দিয়ে ডক করা হয় যাতে <div> উপাদান টেলিপোর্ট করা হয় বা না হয়।

CompOne.vue:

<template>
  <div>
    <h2>Component</h2>
    <p>This is the inside of the component.</p>
    <button @click="teleportOn = !teleportOn">Teleport on/off</button>
    <Teleport to="body" :disabled="teleportOn">
      <div id="redDiv">Hello!</div>
    </Teleport>
  </div>
</template>

<script>
export default {
  data() {
    return {
      teleportOn: true
    }
  }
}
</script>

<style scoped>
  #redDiv {
    background-color: lightcoral;
    margin: 10px;
    padding: 10px;
    width: 100px;
  }
</style>

Vue <টেলিপোর্ট> কম্পোনেন্ট টিউটোরিয়াল

Vue-তে <Teleport> উপাদান সম্পর্কে আপনার বোঝার পরীক্ষা করার জন্য এই টিউটোরিয়ালটি ব্যবহার করে দেখুন।

❓Vue-তে <Teleport> উপাদানটি কিসের জন্য ব্যবহৃত হয়?

উপাদান দ্রুত লোড করার জন্য

✗ ভুল! <টেলিপোর্ট> উপাদান লোডিং গতি উন্নত করে না

উপাদানগুলির মধ্যে ডেটা বিনিময়ের জন্য

✗ ভুল! <টেলিপোর্ট> ডেটা স্থানান্তরের জন্য নয়

DOM কাঠামোর উপাদানগুলিকে অন্য অবস্থানে সরাতে

✓ ঠিক আছে! <Teleport> উপাদানটি DOM-এ উপাদানগুলিকে এক অবস্থান থেকে অন্য স্থানে সরাতে ব্যবহৃত হয়

স্বয়ংক্রিয়ভাবে উপাদান আপডেট করতে

✗ ভুল! <টেলিপোর্ট> স্বয়ংক্রিয় আপডেট প্রদান করে না

এটা কিভাবে কাজ করে

কিভাবে <টেলিপোর্ট> উপাদান কাজ করে:

টেলিপোর্ট করা বিষয়বস্তু উপাদান কাঠামোর যৌক্তিক জায়গায় চলতে থাকবে

টেলিপোর্টেড উপাদানগুলি তাদের মূল উপাদানগুলির অবস্থান এবং মালিকানা ধরে রাখে

স্কোপড শৈলী টেলিপোর্ট করা সামগ্রীতে প্রযোজ্য হতে থাকবে

ইভেন্ট হ্যান্ডলাররা কাজ চালিয়ে যাচ্ছেন

টেলিপোর্ট করা উপাদানগুলি ধ্বংস হয়ে যায় যখন তাদের মূল উপাদান ধ্বংস হয়ে যায়

সর্বোত্তম অনুশীলন

<Teleport> উপাদান ব্যবহার করার সময় এই নির্দেশিকাগুলি অনুসরণ করুন:

মডেল এবং টুলটিপের জন্য <Teleport> ব্যবহার করুন

z-সূচক সমস্যা এড়াতে পৃষ্ঠার মূলে টেলিপোর্ট করুন

বিকল্প ফল-ব্যাক প্রদান করতে অক্ষম প্রপ ব্যবহার করুন

প্রতিটি ছোট UI উপাদানের জন্য <Teleport> ব্যবহার করবেন না

লক্ষ্য উপাদানটি ইতিমধ্যেই DOM-এ বিদ্যমান রয়েছে তা নিশ্চিত করুন৷

⚠️মূল ফোকাস:

এমনকি যদি কিছু বিষয়বস্তু <Teleport> এর সাথে একটি কম্পোনেন্টের বাইরে সরানো হয়, Vue নিশ্চিত করে যে <script> এবং <style> ট্যাগের ভিতরে থাকা কম্পোনেন্টের সংশ্লিষ্ট কোড এখনও সরানো সামগ্রীর জন্য কাজ করে।