Jassif Team Institution

Vue Balthru বৈশিষ্ট্য

একটি উপাদানকে এমন বৈশিষ্ট্যগুলির সাথে ডাকা যেতে পারে যেগুলি প্রপস হিসাবে ঘোষণা করা হয় না এবং সেগুলি কেবল উপাদানের মূল উপাদানে পড়ে।

বলথ্রু অ্যাট্রিবিউটের সাহায্যে আপনি প্যারেন্টের কাছ থেকে আরও ভাল ওভারভিউ পাবেন যেখানে কম্পোনেন্ট তৈরি করা হয়েছে এবং আমাদের কোড সরলীকৃত হয়েছে কারণ আমাদের অ্যাট্রিবিউটটিকে প্রপ হিসাবে ঘোষণা করার দরকার নেই।

শ্রেণী, শৈলী এবং ভি-অন হিসাবে ব্যবহৃত সাধারণ বৈশিষ্ট্যগুলি।

Palthrough এর বৈশিষ্ট্য

উদাহরণস্বরূপ, কম্পোনেন্টের ভিতরে স্টাইলিং অদৃশ্য হয়ে যাওয়ার চেয়ে পিতামাতার কাছ থেকে কম্পোনেন্ট স্টাইলিং নিয়ন্ত্রণ করা ভাল।

আসুন Vue-তে একটি মৌলিক করণীয় তালিকা তৈরি করি এবং দেখুন কিভাবে স্টাইল অ্যাট্রিবিউটটি করণীয় বিষয়গুলির প্রতিনিধিত্বকারী উপাদানগুলির মধ্যে পড়ে।

সুতরাং, আমাদের App.vue-এর করণীয় এবং নতুন জিনিস যোগ করার জন্য একটি তালিকা থাকা দরকারউপাদান এবং. প্রতিটি তালিকা আইটেম হয়উপাদান হয়।

App.vue:

<template>
  <h3>Todo List</h3>  
  <ul>
    <todo-item
      v-for="x in items"
      :key="x"
      :item-name="x"
    />
  </ul>
  <input v-model="newItem">
  <button @click="addItem">Add</button>
</template>

<script>
  export default {
    data() {
      return {
        newItem: '',
        items: ['Buy apples','Make pizza','Mow the lawn']
      };
    },
    methods: {
      addItem() {
        this.items.push(this.newItem),
        this.newItem = '';
      }
    }
  }
</script>

TodoItem.vue:

একটি প্রপ পায় যা বর্ণনা করে কি করতে হবে:

<template>
  <li>{{ itemName }}</li>
</template>

<script>
  export default {
    props: ['itemName']
  }
</script>

main.js:

import { createApp } from 'vue'
  
import App from './App.vue'
import TodoItem from './components/TodoItem.vue'

const app = createApp(App)
app.component('todo-item', TodoItem)
app.mount('#app')

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

App.vue থেকে <li> উপাদানের ভিতরে স্টাইল দিতে:

<template>
  <h3>Todo List</h3>
  <ul>
    <todo-item
      v-for="x in items"
      :key="x"
      :item-name="x"
      style="background-color: lightgreen;"
    />
  </ul>
  <input v-model="newItem">
  <button @click="addItem">Add</button>
</template>

'ক্লাস' এবং 'স্টাইল' বৈশিষ্ট্যগুলি একত্রিত করা

যদি 'ক্লাস' বা 'স্টাইল' অ্যাট্রিবিউটগুলি ইতিমধ্যেই সেট করা থাকে এবং 'ক্লাস' বা 'স্টাইল' অ্যাট্রিবিউটগুলিও অভিভাবক থেকে পাস করা হয়, তাহলে অ্যাট্রিবিউটগুলি মার্জ করা হবে।

উদাহরণ

অভিভাবক থেকে বিদ্যমান স্টাইলিং ছাড়াও, আমরা TodoItem.vue উপাদানের ভিতরে <li> উপাদানগুলিতে মার্জিন যোগ করি:

<template>
  <li style="margin: 5px 0;">{{ itemName }}</li>
</template>

<script>
  export default {
    props: ['itemName']
  }
</script>

$attrs

কম্পোনেন্টের রুট লেভেলে একাধিক এলিমেন্ট থাকলে, কোন এলিমেন্টে অ্যাট্রিবিউট পড়তে হবে তা আর স্পষ্ট নয়।

কোন রুট উপাদানটি পাসথ্রু বৈশিষ্ট্যগুলি গ্রহণ করে তা নির্ধারণ করতে, আপনি বিল্ট-ইন $attrs অবজেক্ট দিয়ে উপাদানটিকে চিহ্নিত করতে পারেন, যেমন:

উদাহরণ

TodoItem.vue:

<template>
  <div class="pinkBall"></div>
  <li v-bind="$attrs">{{ itemName }}</li>
  <div class="pinkBall"></div>
</template>

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

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

<fish-type 
  />