Jassif Team Institution

Local Components

এখন পর্যন্ত আমরা কম্পোনেন্ট যোগ করছি যাতে সেগুলি একটি প্রজেক্টের সমস্ত *.vue ফাইল থেকে অ্যাক্সেস করা যায়।

উপাদানগুলি স্থানীয়ভাবে পরিবর্তন করা যেতে পারে, যার অর্থ তারা শুধুমাত্র একটি নির্দিষ্ট *.vue ফাইলের মধ্যে অ্যাক্সেসযোগ্য।

গ্লোবাল উপাদান

এখন পর্যন্ত main.js-এ যেভাবে কম্পোনেন্ট যোগ করা হয়েছে তা হল প্রজেক্টের অন্যান্য *.vue ফাইলের <টেমপ্লেট>-এর ভিতরে কম্পোনেন্টগুলি অ্যাক্সেসযোগ্য।

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

আমরা CompTwo.vue এবং App.vue উভয় ক্ষেত্রেই CompOne.vue কম্পোনেন্ট ব্যবহার করি যাতে দেখা যায় যে উপাদানগুলি একে অপরের কাছে অ্যাক্সেসযোগ্য।

main.js:

import { createApp } from 'vue'
 
import App from './App.vue'
import CompOne from './components/CompOne.vue'
import CompTwo from './components/CompTwo.vue'

const app = createApp(App)
app.component('comp-one', CompOne)
app.component('comp-two', CompTwo)
app.mount('#app')

এটি কীভাবে কাজ করে তা দেখতে "এটি নিজে চেষ্টা করুন" বোতামে ক্লিক করুন৷

স্থানীয় উপাদান

একটি উপাদান main.js এ যোগ করার পরিবর্তে একটি *.vue ফাইলের <script> ট্যাগে সরাসরি যোগ করা যেতে পারে।

একটি *.vue ফাইলে সরাসরি একটি কম্পোনেন্ট যোগ করলে কম্পোনেন্টটিকে শুধুমাত্র স্থানীয়ভাবে সেই ফাইলে অ্যাক্সেসযোগ্য করে তোলে।

উদাহরণ

CompOne.vue App.vue , , main.js .

main.js:

import { createApp } from 'vue'
 
import App from './App.vue'
import CompOne from './components/CompOne.vue' 
import CompTwo from './components/CompTwo.vue'
 
const app = createApp(App)
app.component('comp-one', CompOne) 
app.component('comp-two', CompTwo)
app.mount('#app')

এবং আমরা CompOne.vue সরাসরি App.vue এর <script> ট্যাগে যোগ করি।

App.vue:

<template>
  <h3>Local Component</h3>
  <p>The CompOne.vue component is a local component and can only be used inside App.vue.</p>
  <comp-one />
  <comp-two />
</template>

<script> 
  import CompOne from './components/CompOne.vue';

  export default {
    components: {
      'comp-one': CompOne
    }
  }
</script>

গ্লোবাল বনাম স্থানীয় উপাদানের তুলনা

কখন ব্যবহার করবেন?

ভিউ টিউটোরিয়াল

ব্যায়াম দিয়ে নিজেকে পরীক্ষা করুন

<script> 
  CompOne from './components/CompOne.vue';

  export default {
    
: {
      'comp-one': 

    }
  }
</script>