Jassif Team Institution

বস্তু

কম্পোনেন্ট ইনস্ট্যান্সে Vue-তে বস্তুর একটি সংগ্রহ রয়েছে।

আইটেম বিস্তারিত বিবরণ

this.$attrs.class
this.$attrs.style
this.$attrs.onClick

ডেটা() { ফিরে বার্তা: 'হ্যালো' } } // অ্যাক্সেস: this.message // অথবা এই.$data.message

// উপাদানটির মূল উপাদান: এই।$el // DOM অপারেশন: this.$el.querySelector() এই।$el.style.backgroundColor

// পিতামাতার ডেটা অ্যাক্সেস: এই।$parent.parentData // অভিভাবকদের কল করার পদ্ধতি: এই।$parent.parentMethod()

প্রপস: ['শিরোনাম', 'গণনা'] // অ্যাক্সেস: এই শিরোনাম // অথবা এই.$props.title এই.$props.count

<input ref="myInput"> // অ্যাক্সেস: এই.$refs.myInput এই.$refs.myInput.focus()

// সম্পূর্ণ অ্যাপ্লিকেশনের মূল: এই.$ root // বিশ্বব্যাপী রাষ্ট্র পরিচালনা: এই.$root.globalState এই।$root.globalMethod()

// স্লট পরীক্ষা করতে: যদি (this.$slots.default) { // একটি ডিফল্ট স্লট আছে } যদি (this.$slots.header) { // হেডার স্লট উপলব্ধ }

পদ্ধতি

কম্পোনেন্ট ইনস্ট্যান্সে Vue-তে পদ্ধতির একটি সংগ্রহ রয়েছে, যা 'এই' কীওয়ার্ড দিয়ে অ্যাক্সেস করা যেতে পারে।

পদ্ধতির বিস্তারিত বর্ণনা

// শিশু উপাদানে: পদ্ধতি: { sendData() { this.$emit('কাস্টম-ইভেন্ট', ডেটা) } } // মূল উপাদানে: <শিশু-উপাদান @custom-event="handleEvent" />

// উপাদানটিকে পুনরায় রেন্ডার করতে বাধ্য করতে: এই।$forceUpdate() // ব্যবহার: পদ্ধতি: { forceRender() { // প্রতিক্রিয়াশীলতা সেটিংস এড়াতে এই।$forceUpdate() } }

// DOM আপডেটের পরে: this.someData = 'নতুন মান' এই।$nextTick(() => { // DOM এখন আপডেট করা হয়েছে this.$refs.myElement.focus() }) // প্রতিশ্রুতি সিনট্যাক্স: এটির জন্য অপেক্ষা করুন।$nextTick() // DOM আপডেট করা হয়েছে

// প্রহরী তৈরি করুন: const unwatch = this.$watch( 'কাউন্টার', (newVal, oldVal) => { console.log(`কাউন্টার পরিবর্তিত হয়েছে: ${oldVal} → ${newVal}`) } ) // প্রহরী বন্ধ করুন: উন্মোচন() // তাৎক্ষণিক মনিটর: এই।$ঘড়ি( 'user.name', (নতুন নাম) => { console.log(`নাম পরিবর্তিত হয়েছে: ${newName}`) }, { অবিলম্বে: সত্য } )

ব্যবহারিক উদাহরণ

1. $emit() এর সাথে পিতামাতা-সন্তানের যোগাযোগ

// ChildComponent.vue
<template>
  <button @click="notifyParent">
    Click Me
  </button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('button-clicked', {
        timestamp: new Date(),
        message: 'Button was clicked'
      })
    }
  }
}
</script>

// ParentComponent.vue
<template>
  <child-component 
    @button-clicked="handleButtonClick"
  />
</template>

<script>
export default {
  methods: {
    handleButtonClick(eventData) {
      console.log('Child button clicked:', eventData)
    }
  }
}
</script>

2. $refs সহ DOM উপাদানগুলিতে অ্যাক্সেস

<টেমপ্লেট> <div> <input ref="emailInput" v-model="email"> <button @click="focusInput">ফোকাস ইনপুট</button> </div> </ টেমপ্লেট> <script> রপ্তানি ডিফল্ট { ডেটা() { ফিরে ইমেইল: '' } }, পদ্ধতি: { ফোকাসইনপুট() { // $refs এর মাধ্যমে DOM উপাদানে অ্যাক্সেস this.$refs.emailInput.focus() this.$refs.emailInput.select() } }, মাউন্ট করা() { // কম্পোনেন্ট মাউন্ট করা হলে স্বয়ংক্রিয়ভাবে ফোকাস করতে এই।$nextTick(() => { this.$refs.emailInput.focus() }) } } </script>

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

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