vuejs সন্তানের উপাদান থেকে পিতামাতার ডেটা আপডেট করে

Question

আমি ভয়েজ (২.০) দিয়ে খেলতে শুরু করছি। আমি এতে একটি উপাদান সহ একটি সাধারণ পৃষ্ঠা তৈরি করেছি। পৃষ্ঠায় ডেটা সহ একটি ভ্যুর উদাহরণ রয়েছে। সেই পৃষ্ঠাটিতে আমি নিবন্ধভুক্ত করেছি এবং উপাদানটি এইচটিএমএলে যুক্ত করেছি। উপাদানটির একটি রয়েছে input[type=text]। আমি সেই মানটি পিতামাতার প্রতিফলিত করতে চাই (প্রধান মান উদাহরণ)।

আমি কীভাবে উপাদানটির প্যারেন্ট ডেটা সঠিকভাবে আপডেট করব? পিতামাতার কাছ থেকে বাউন্ড প্রোপ পাস করা ভাল নয় এবং কনসোলে কিছু সতর্কতা নিক্ষেপ করে। তাদের ডকের কিছু আছে তবে এটি কার্যকর হচ্ছে না।

Comments

আপনি যে কোডটি চেষ্টা করেছেন তা যুক্ত করতে পারেন, যা কাজ করছে না।

— সৌরভ

আমি ভুতে পিতামহীন-সন্তানের উপাদানগুলির মধ্যে ডেটা কীভাবে ভাগ করতে পারি তার

— জৈব অ্যাডভোকেট

Answer 1

আরও ইভেন্ট-চালিত আর্কিটেকচার ব্যবহারের পক্ষে ভ্যু 2.0 তে দ্বিমুখী বাইন্ডিং হ্রাস করা হয়েছে। সাধারণভাবে, কোনও শিশুকে তার প্রপসগুলি পরিবর্তন করতে হবে না। বরং এটি $emitইভেন্টগুলি উচিত এবং পিতামাতার সেই ইভেন্টগুলিতে প্রতিক্রিয়া জানানো উচিত ।

আপনার নির্দিষ্ট ক্ষেত্রে, আপনি একটি কাস্টম উপাদান ব্যবহার করতে পারেন v-model। এটি একটি বিশেষ বাক্য গঠন যা দ্বি-মুখী বন্ধনের কাছাকাছি কিছু করার অনুমতি দেয় তবে এটি উপরে বর্ণিত ইভেন্ট-চালিত আর্কিটেকচারের জন্য একটি সংক্ষিপ্তকরণ। আপনি এটি সম্পর্কে এখানে পড়তে পারেন -> https://vuejs.org/v2/guide/components.html#Form- ইনপুট- উপাদানসমূহ- ব্যবহার- কাস্টম- ইভেন্টস ।

এখানে একটি সাধারণ উদাহরণ:

Vue.component('child', {
  template: '#child',
  
  //The child has a prop named 'value'. v-model will automatically bind to this prop
  props: ['value'],
  methods: {
    updateValue: function (value) {
      this.$emit('input', value);
    }
  }
});

new Vue({
  el: '#app',
  data: {
    parentValue: 'hello'
  }
});

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

<div id="app">
  <p>Parent value: {{parentValue}}</p>
  <child v-model="parentValue"></child>
</div>

<template id="child">
   <input type="text" v-bind:value="value" v-on:input="updateValue($event.target.value)">
</template>

---

দস্তাবেজগুলি এতে উল্লেখ করে

<custom-input v-bind:value="something" v-on:input="something = arguments[0]"></custom-input>

সমতুল্য

<custom-input v-model="something"></custom-input>

এই কারণেই সন্তানের উপর প্রপসের নামকরণ করা দরকার এবং কেন সন্তানের নামের কোনও ইভেন্ট নির্গত করতে হবে input।

Comments

প্রতিক্রিয়া জন্য প্রথম ধন্যবাদ। আপনি কি দয়া করে প্রসারিত করতে পারেন, বা 'ইনপুট' ইভেন্ট সম্পর্কে নথিগুলিতে আরও ভাল নির্দেশ করতে পারেন? মনে হচ্ছে এটি একটি বিল্ট ইন ইভেন্টের মতো।

— গাল জিভ

আমি একটি স্পেসিফিকেশন যুক্ত করেছি এবং ডকুমেন্টেশনের লিঙ্কটি আরও স্পষ্ট করে দিয়েছি।

— আসেমাহলে

আমি উপাদান এবং তৈরি ফাংশনটির জন্য প্রোপ "মান" বাদ দিয়েছি এবং এটি এখনও কাজ করে। আপনি কেন এটি ব্যবহার করেছেন তা ব্যাখ্যা করতে পারেন?

— xetra11

আপনি যদি প্রপটি যোগ না করেন, তবে এটি undefinedপ্রথম পরিবর্তন হওয়া পর্যন্ত হবে । এই মন্তব্যটি দেখুন যেখানে আমি মন্তব্য করেছি props: ['value']। প্রারম্ভিক মানটি undefinedপরিবর্তে কীভাবে তা লক্ষ্য করুন hello: jsfiddle.net/asemahle/8Lrkfxj6 । প্রথম পরিবর্তনের পরে, ভিউ গতিশীলভাবে উপাদানটিতে একটি মান প্রাপ যুক্ত করে, তাই এটি কার্যকর হয়।

— আসেমাহলে

আমি ডকসগুলিতে এটি ঠিক অতীতে পড়েছি। দুর্দান্ত কাজের উদাহরণ। +10 যদি পারতাম!

— কাদামাটি

Answer 2

ডকুমেন্টেশন থেকে :

Vue.js এ, পিতা-মাতার সন্তানের সম্পর্কের সংক্ষিপ্তসার ঘটতে পারে ইভেন্টগুলি আপ হিসাবে। অভিভাবকরা প্রপসের মাধ্যমে বাচ্চার কাছে ডেটা প্রেরণ করেন এবং শিশু ইভেন্টের মাধ্যমে পিতামাতার কাছে বার্তা প্রেরণ করে। আসুন দেখি তারা কীভাবে পরবর্তী কাজ করে।

প্রপস কিভাবে পাস করবেন

কোনও শিশু উপাদানকে প্রপস দেওয়ার কোডটি নীচে দেওয়া হল:

<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
</div>

কীভাবে ইভেন্ট নির্গত হয়

এইচটিএমএল:

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

জাতীয়:

Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

Comments

যদি ফাংশনটি মূল উপাদানটিতে অন্তর্ভুক্ত হয় এবং আমি সন্তানের উপাদান থেকে এটি ট্রিগার করতে চেয়েছিলাম তবে কী হবে?

— হামজাউইআইই

ধারণাটি উপলব্ধি করার শিয়ার মুহূর্তটি হ্যাকি কপি পেস্ট দ্বারা এটি বেশ কয়েকবার ব্যবহার করা হয়েছে ...

— জর্জিভ

আমি সেই গ্রাফিকটি মুদ্রণ করব এবং এটি আমার মাথায় আটকে দেব। ধন্যবাদ!

— ডোমিঃ

এই উদাহরণস্বরূপ, আমাদের কাছে কি কোনও ইভেন্ট শ্রোতা মূল উপাদানটিতে সংজ্ঞায়িত করা উচিত নয়? এর মতো কিছু: `` `মাউন্ট করা () {this.on ('ইনক্রিমেন্ট', () => {this.incrementTotal ();}); } `` `

— jmk2142

Answer 3

শিশু উপাদানগুলিতে:

this.$emit('eventname', this.variable)

মূল উপাদানটিতে:

<component @eventname="updateparent"></component>

methods: {
    updateparent(variable) {
        this.parentvariable = variable
    }
}

Comments

আমার মনটি কেবল এই উদাহরণ দিয়ে ফুঁকছে। এখানে আসার আগে আমি কতটা টিউটোরিয়াল দিয়েছি সে সম্পর্কে আপনার কোনও ধারণা নেই ...

— suchis Life

Answer 4

শিশু উপাদান

this.$emit('event_name')প্যারেন্ট উপাদানগুলিতে কোনও ইভেন্ট প্রেরণ করতে ব্যবহার করুন ।

মূল উপাদান Comp

অভিভাবক উপাদানটিতে that ইভেন্টটি শোনার জন্য, আমরা এটি করি v-on:event_nameএবং একটি ইভেন্ট ( ex. handleChange) যা আমরা সেই ইভেন্টে চালাতে চাই তা ঘটে occurs

সম্পন্ন :)

Answer 5

আমি উপরোক্তদের জন্য ইভেন্ট নির্গত এবং ভি-মডেল উত্তরগুলির সাথে একমত। যাইহোক, আমি ভেবেছিলাম যে আমি একাধিক ফর্ম উপাদানগুলির সাথে যে উপাদানগুলি পেয়েছি সেগুলি পোস্ট করতে হবে যা তাদের পিতামাতার কাছে ফিরে যেতে চায় যেহেতু এটি গুগল দ্বারা ফিরে আসা প্রথম নিবন্ধগুলির মধ্যে একটি বলে মনে হয়।

আমি জানি যে প্রশ্নটি একটি একক ইনপুট নির্দিষ্ট করে, তবে এটি নিকটতম ম্যাচ বলে মনে হয়েছিল এবং একই ধরণের ভ্যূ উপাদানগুলির সাথে লোকদের কিছুটা সময় সাশ্রয় করতে পারে। এছাড়াও, .syncএখনও কেউ এই সংশোধকটির কথা উল্লেখ করেনি।

যতদূর আমি জানি, v-modelসমাধানটি কেবলমাত্র তাদের পিতামাতার কাছে ফিরে আসা একটি ইনপুটটির পক্ষে উপযুক্ত। আমি এটি খুঁজতে কিছুটা সময় নিয়েছিলাম তবে ভ্যু (২.৩.০) ডকুমেন্টেশনটি দেখায় যে কীভাবে উপাদানগুলিতে পাঠানো একাধিক প্রপগুলি প্যারেন্টের কাছে ফিরে পাঠানো যায় (অবশ্যই ইমিটের মাধ্যমে)।

একে যথাযথভাবে .syncসংশোধক বলা হয় ।

এখানে ডকুমেন্টেশন যা বলে:

কিছু ক্ষেত্রে, আমাদের প্রপসের জন্য "দ্বি-দ্বি বাইন্ডিং" লাগতে পারে। দুর্ভাগ্যক্রমে, সত্য দ্বিমুখী বাঁধাই রক্ষণাবেক্ষণের সমস্যা তৈরি করতে পারে, কারণ সন্তানের উপাদানগুলি সেই রূপান্তরটির উত্স ছাড়াই পিতামাতাকে পরিবর্তিত করতে পারে পিতা-মাতা এবং সন্তানের উভয় ক্ষেত্রেই সুস্পষ্ট।

যে কারণে পরিবর্তে, আমরা এর প্যাটার্নে ঘটনা নির্গমন সুপারিশ update:myPropName। উদাহরণস্বরূপ, একটি titleপ্রপ সঙ্গে একটি অনুমান উপাদান মধ্যে আমরা একটি নতুন মান নির্ধারণের অভিপ্রায়টি সাথে যোগাযোগ করতে পারি:

this.$emit('update:title', newTitle)

তারপরে অভিভাবকরা সেই ইভেন্টটি শুনতে এবং কোনও স্থানীয় ডেটা সম্পত্তি চাইলে আপডেট করতে পারে। উদাহরণ স্বরূপ:

<text-document   
 v-bind:title="doc.title"  
 v-on:update:title="doc.title = $event"
></text-document>

সুবিধার্থে, আমরা। Sync সংশোধক সহ এই প্যাটার্নটির জন্য একটি শর্টহ্যান্ড সরবরাহ করি:

<text-document v-bind:title.sync="doc.title"></text-document>

আপনি কোনও বস্তুর মাধ্যমে প্রেরণ করে একসাথে একাধিক সিঙ্ক করতে পারেন। পরীক্ষা করে দেখুন এখানে ডকুমেন্টেশন

Comments

এই আমি খুঁজছিলাম ছিল। অনেক ধন্যবাদ.

— টমাস

এটি ২০২০ সালের মতো সেরা এবং সর্বশেষতম সমাধান। অনেক অনেক ধন্যবাদ!

— মার্সেলো

Answer 6

আরও সহজ উপায় ব্যবহার this.$emit

Father.vue

<template>
  <div>
    <h1>{{ message }}</h1>
    <child v-on:listenerChild="listenerChild"/>
  </div>
</template>

<script>
import Child from "./Child";
export default {
  name: "Father",
  data() {
    return {
      message: "Where are you, my Child?"
    };
  },
  components: {
    Child
  },
  methods: {
    listenerChild(reply) {
      this.message = reply;
    }
  }
};
</script>

Child.vue

<template>
  <div>
    <button @click="replyDaddy">Reply Daddy</button>
  </div>
</template>

<script>
export default {
  name: "Child",
  methods: {
    replyDaddy() {
      this.$emit("listenerChild", "I'm here my Daddy!");
    }
  }
};
</script>

আমার সম্পূর্ণ উদাহরণ: https://codesandbox.io/s/update-parent-property-ufj4b

Answer 7

অবজেক্ট বা অ্যারে হিসাবে প্রপসগুলি পাস করাও সম্ভব। এক্ষেত্রে ডেটা দ্বিমুখীভাবে বাঁধা থাকবে:

(এটি বিষয়ের শেষে উল্লেখ করা হয়েছে: https://vuejs.org/v2/guide/compferences.html# এক- ওয়ে-ডেটা- ফ্লো )

Vue.component('child', {
  template: '#child',
  props: {post: Object},
  methods: {
    updateValue: function () {
      this.$emit('changed');
    }
  }
});

new Vue({
  el: '#app',
  data: {
    post: {msg: 'hello'},
    changed: false
  },
  methods: {
    saveChanges() {
        this.changed = true;
    }
  }
});

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

<div id="app">
  <p>Parent value: {{post.msg}}</p>
  <p v-if="changed == true">Parent msg: Data been changed - received signal from child!</p>
  <child :post="post" v-on:changed="saveChanges"></child>
</div>

<template id="child">
   <input type="text" v-model="post.msg" v-on:input="updateValue()">
</template>

Answer 8

সঠিক উপায়টি হ'ল $emit()সন্তানের উপাদানগুলির একটি ইভেন্ট যা প্রধান ভ্যু উদাহরণটি শুনে ।

// Child.js
Vue.component('child', {
  methods: {
    notifyParent: function() {
      this.$emit('my-event', 42);
    }
  }
});

// Parent.js
Vue.component('parent', {
  template: '<child v-on:my-event="onEvent($event)"></child>',
  methods: {
    onEvent: function(ev) {
      v; // 42
    }
  }
});

Answer 9

1) শিশু উপযুক্ত: আপনি চাইল্ড উপাদানগুলির লেখার ক্ষেত্রে এটির মতো ব্যবহার করতে পারেন: this.forValue হল প্যারেন্ট উপাদানগুলিতে কিছু ডেটা প্রেরণ করা

this.$emit('send',this.formValue)

2) প্যারেন্ট কমপিট: এবং প্যারেন্ট উপাদান উপাদান রিসিভ এ ভেরিয়েবল প্রেরণ করুন: এবং প্যারেন্ট উপাদান উপাদান ট্যাগে সন্তানের উপযুক্ত তথ্য প্রাপ্তির জন্য এই কোড

@send="newformValue"

Answer 10

অন্য উপায়টি হ'ল সন্তানের উপাদানগুলির প্রস্তাব হিসাবে পিতামাতার কাছ থেকে আপনার সেটারের একটি রেফারেন্স পাস করা, তারা কীভাবে প্রতিক্রিয়া দেখায় to বলুন, আপনি একটি পদ্ধতি আছে updateValueমান আপডেট করার জন্য পিতা বা মাতা, আপনি তাই মত সন্তান উপাদান instantiate পারে: <child :updateValue="updateValue"></child>। তারপর শিশুটির ওপর আপনি যদি একটি সংশ্লিষ্ট ঠেকনা হবে: props: {updateValue: Function}এবং টেমপ্লেটে পদ্ধতি কল যখন ইনপুট পরিবর্তন: <input @input="updateValue($event.target.value)">।

Answer 11

আমি জানি না কেন তবে আমি কেবলমাত্র ডেটা অবজেক্ট হিসাবে ব্যবহার করে প্যারেন্ট ডেটা সাফল্যের সাথে আপডেট করেছি :setএবংcomputed

Parent.vue

<!-- check inventory status - component -->
    <CheckInventory :inventory="inventory"></CheckInventory>

data() {
            return {
                inventory: {
                    status: null
                },
            }
        },

Child.vue

<div :set="checkInventory">

props: ['inventory'],

computed: {
            checkInventory() {

                this.inventory.status = "Out of stock";
                return this.inventory.status;

            },
        }

Answer 12

তার উদাহরণ আপনাকে জানাবে কীভাবে জমা দেওয়া বোতামে পিতামাতার কাছে ইনপুট মানটি পাস করতে হয়।

প্রথমে ইভেন্ট ভাসকে নতুন ভ্যু হিসাবে সংজ্ঞায়িত করুন।

//main.js
import Vue from 'vue';
export const eventBus = new Vue();

Pass your input value via Emit.
//Sender Page
import { eventBus } from "../main";
methods: {
//passing data via eventbus
    resetSegmentbtn: function(InputValue) {
        eventBus.$emit("resetAllSegment", InputValue);
    }
}

//Receiver Page
import { eventBus } from "../main";

created() {
     eventBus.$on("resetAllSegment", data => {
         console.log(data);//fetching data
    });
}

Answer 13

আমি মনে করি এটি কৌশলটি করবে:

@change="$emit(variable)"