Vue.js এ পিতামাতার কাছ থেকে কীভাবে কোনও শিশু পদ্ধতিতে অ্যাক্সেস করবেন

Question 1

আমার দুটি নেস্টেড উপাদান রয়েছে, পিতা-মাতার কাছ থেকে সন্তানের পদ্ধতিগুলি অ্যাক্সেস করার সঠিক উপায় কী?

this.$children[0].myMethod() কৌশলটি মনে হচ্ছে তবে এটি বেশ কুৎসিত, তাই না, এর চেয়ে ভাল আর কী হতে পারে:

<script>
import child from './my-child'

export default {
  components: {
   child
  },
  mounted () {
    this.$children[0].myMethod()
  }
}
</script>

Question 2

আপনি রেফ ব্যবহার করতে পারেন ।

import ChildForm from './components/ChildForm'

new Vue({
  el: '#app',
  data: {
    item: {}
  },
  template: `
  <div>
     <ChildForm :item="item" ref="form" />
     <button type="submit" @click.prevent="submit">Post</button>
  </div>
  `,
  methods: {
    submit() {
      this.$refs.form.submit()
    }
  },
  components: { ChildForm },
})

যদি আপনি আঁটসাঁট মিলন অপছন্দ করেন তবে আপনি @ ইউসভেল কুইন্টেরো দ্বারা দেখানো ইভেন্ট ইভেন্টটি ব্যবহার করতে পারেন । প্রপস হিসাবে বাসে পাস করে ইভেন্ট বাস ব্যবহার করার আরও একটি উদাহরণ নীচে দেওয়া হয়েছে।

import ChildForm from './components/ChildForm'

new Vue({
  el: '#app',
  data: {
    item: {},
    bus: new Vue(),
  },
  template: `
  <div>
     <ChildForm :item="item" :bus="bus" ref="form" />
     <button type="submit" @click.prevent="submit">Post</button>
  </div>
  `,
  methods: {
    submit() {
      this.bus.$emit('submit')
    }
  },
  components: { ChildForm },
})

উপাদানগুলির কোড।

<template>
 ...
</template>

<script>
export default {
  name: 'NowForm',
  props: ['item', 'bus'],
  methods: {
    submit() {
        ...
    }
  },
  mounted() {
    this.bus.$on('submit', this.submit)
  },  
}
</script>

https://code.luasoftware.com / টিউটোরিয়ালস /vuejs/parent-call-child-comp घटक-method/

Question 3

VueJS- এ পিতা-সন্তানের যোগাযোগ

একটি রুট ভ্যু উদাহরণ দেওয়া সমস্ত বংশধরদের মাধ্যমে অ্যাক্সেসযোগ্য this.$root, কোনও প্যারেন্ট উপাদানগুলি this.$childrenঅ্যারের মাধ্যমে শিশু উপাদানগুলিতে অ্যাক্সেস করতে পারে এবং কোনও শিশু উপাদান তার পিতামাতার মাধ্যমে this.$parentঅ্যাক্সেস করতে পারে, আপনার প্রথম প্রবৃত্তিটি সরাসরি এই উপাদানগুলিতে অ্যাক্সেস করতে পারে।

ভ্যুজেএস ডকুমেন্টেশন দুটি খুব ভাল কারণে বিশেষত এর বিরুদ্ধে সতর্ক করে:

এটি দৃly়ভাবে সন্তানের সাথে পিতামাতাকে দম্পতি করে (এবং বিপরীতে)
আপনি সন্তানের উপাদান দ্বারা এটি সংশোধন করা যেতে পারে যে, আপনি পিতামাতার অবস্থার উপর নির্ভর করতে পারবেন না।

সমাধানটি হ'ল ভয়ের কাস্টম ইভেন্ট ইন্টারফেসটি ব্যবহার করা

ভ্যু দ্বারা বাস্তবায়িত ইভেন্ট ইন্টারফেস আপনাকে উপাদান গাছটিকে উপরে এবং নীচে যোগাযোগ করতে দেয়। কাস্টম ইভেন্ট ইন্টারফেসের সুবিধা আপনাকে চারটি পদ্ধতিতে অ্যাক্সেস দেয়:

$on() - আপনাকে ইভেন্টটি শোনার জন্য আপনার ভ্যূ উদাহরণটিতে শ্রোতা ঘোষণা করার অনুমতি দেয়
$emit() - আপনাকে একই পরিস্থিতিতে ইভেন্টগুলি ট্রিগার করতে দেয় (স্ব)

ব্যবহারের উদাহরণ `$on()`এবং `$emit()`:

const events = new Vue({}),
    parentComponent = new Vue({
      el: '#parent',
      ready() {
        events.$on('eventGreet', () => {
          this.parentMsg = `I heard the greeting event from Child component ${++this.counter} times..`;
        });
      },
      data: {
        parentMsg: 'I am listening for an event..',
        counter: 0
      }
    }),
    childComponent = new Vue({
      el: '#child',
      methods: {
      greet: function () {
        events.$emit('eventGreet');
        this.childMsg = `I am firing greeting event ${++this.counter} times..`;
      }
    },
    data: {
      childMsg: 'I am getting ready to fire an event.',
      counter: 0
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script>

<div id="parent">
  <h2>Parent Component</h2>
  <p>{{parentMsg}}</p>
</div>

<div id="child">
  <h2>Child Component</h2>
  <p>{{childMsg}}</p>
  <button v-on:click="greet">Greet</button>
</div>

স্নিপেট প্রসারিত করুন

উত্তরটি মূল পোস্ট থেকে নেওয়া: ভ্যুজেএস-এর উপাদানগুলির মধ্যে যোগাযোগ করা

Question 4

আপনার নিয়ন্ত্রণ রেন্ডার দ্বারা প্রভাবিত হলে রেফ এবং ইভেন্ট বাস দুটিরই সমস্যা রয়েছে v-if। সুতরাং, আমি একটি সহজ পদ্ধতি নিয়ে যাওয়ার সিদ্ধান্ত নিয়েছি।

ধারণাটি এমন একটি পদ্ধতি পাঠানোর জন্য একটি অ্যারেটিকে একটি সারি হিসাবে ব্যবহার করছে যা সন্তানের উপাদানগুলিতে কল করা প্রয়োজন। উপাদানটি মাউন্ট হয়ে গেলে এটি এই সারিটি প্রক্রিয়া করবে। এটি নতুন পদ্ধতিগুলি কার্যকর করার জন্য সারিতে নজর রাখে।

(ডেসমন্ড লুয়ার উত্তর থেকে কিছু কোড নেওয়া)

মূল উপাদান কোড:

import ChildComponent from './components/ChildComponent'

new Vue({
  el: '#app',
  data: {
    item: {},
    childMethodsQueue: [],
  },
  template: `
  <div>
     <ChildComponent :item="item" :methods-queue="childMethodsQueue" />
     <button type="submit" @click.prevent="submit">Post</button>
  </div>
  `,
  methods: {
    submit() {
      this.childMethodsQueue.push({name: ChildComponent.methods.save.name, params: {}})
    }
  },
  components: { ChildComponent },
})

এটি চাইল্ড কম্পোনেন্টের জন্য কোড

<template>
 ...
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    methodsQueue: { type: Array },
  },
  watch: {
    methodsQueue: function () {
      this.processMethodsQueue()
    },
  },
  mounted() {
    this.processMethodsQueue()
  },
  methods: {
    save() {
        console.log("Child saved...")
    },
    processMethodsQueue() {
      if (!this.methodsQueue) return
      let len = this.methodsQueue.length
      for (let i = 0; i < len; i++) {
        let method = this.methodsQueue.shift()
        this[method.name](method.params)
      }
    },
  },
}
</script>

এবং উন্নতির জন্য অনেকগুলি জায়গা রয়েছে যেমন processMethodsQueueএকটি মিশ্রণে চলে যাওয়া ...

Question 5

অন্য সন্তানের সাথে কোনও সন্তানের অংশের সাথে যোগাযোগ করার জন্য আমি পিতামাতায় একটি পদ্ধতি তৈরি করেছি যা একটি শিশুকে এমন পদ্ধতিতে কল করে:

this.$refs.childMethod()

এবং অন্য সন্তানের কাছ থেকে আমি মূল পদ্ধতিটি কল করেছি:

this.$root.theRootMethod()

এটা আমার জন্য কাজ করেছে।

Vue.js এ পিতামাতার কাছ থেকে কীভাবে কোনও শিশু পদ্ধতিতে অ্যাক্সেস করবেন

VueJS- এ পিতা-সন্তানের যোগাযোগ

সমাধানটি হ'ল ভয়ের কাস্টম ইভেন্ট ইন্টারফেসটি ব্যবহার করা

ব্যবহারের উদাহরণ $on()এবং $emit():

ব্যবহারের উদাহরণ `$on()`এবং `$emit()`: