পিতামাতার ইভেন্টগুলিতে শিশু উপাদানটিতে কীভাবে ফাংশন কল করা যায়

Question

প্রসঙ্গ

ভ্যু 2.0 তে ডকুমেন্টেশন এবং অন্যান্যগুলি স্পষ্টভাবে ইঙ্গিত দেয় যে সন্তানের সাথে পিতামাতার থেকে যোগাযোগ প্রপসের মাধ্যমে ঘটে।

প্রশ্ন

একজন পিতামাতারা কীভাবে তার সন্তানকে প্রপসের মাধ্যমে একটি ঘটনা ঘটেছে তা বলতে পারেন?

আমি কি কেবল ইভেন্ট নামক একটি প্রপোস দেখব? এটি সঠিক মনে হচ্ছে না বা বিকল্পগুলিও করবে না ( $emit/ $onসন্তানের পিতামাতার কাছে এবং হাব মডেলটি দূরবর্তী উপাদানগুলির জন্য)।

উদাহরণ

আমার একটি পিতামাতার ধারক রয়েছে এবং এটির শিশু পাত্রে এটি জানা দরকার যে কোনও এপিআই-তে নির্দিষ্ট ক্রিয়া জড়িত করা ঠিক আছে। ফাংশন ট্রিগার করতে আমার সক্ষম হওয়া দরকার।

Answer 1

সন্তানের উপাদানটিকে একটি দিন refএবং $refsসরাসরি শিশু উপাদানটিতে একটি পদ্ধতি কল করতে ব্যবহার করুন।

এইচটিএমএল:

<div id="app">
  <child-component ref="childComponent"></child-component>
  <button @click="click">Click</button>  
</div>

জাভাস্ক্রিপ্ট:

var ChildComponent = {
  template: '<div>{{value}}</div>',
  data: function () {
    return {
      value: 0
    };
  },
  methods: {
    setValue: function(value) {
        this.value = value;
    }
  }
}

new Vue({
  el: '#app',
  components: {
    'child-component': ChildComponent
  },
  methods: {
    click: function() {
        this.$refs.childComponent.setValue(2.0);
    }
  }
})

আরও তথ্যের জন্য, রেফগুলিতে ভ্যু ডকুমেন্টেশন দেখুন ।

Comments

এইভাবে পিতামাতার এবং সন্তানের উপাদানগুলি একত্রে হয়ে যায়। আসল ইভেন্টগুলির জন্য বলুন, যখন আপনি কেবল কোনও ক্রিয়াকলাপ চালানোর প্রস্তাবটি পরিবর্তন করতে পারবেন না, আমি @ রায় জে

— জারেড

দস্তাবেজগুলির একটি রেফারেন্স সহায়ক হবে as

— well

আমার সন্তানের উপাদানগুলিতে, বিশেষ কারণে, আমাকে বিক্রিয়াশীলতা বন্ধ করতে ভি-একবার ব্যবহার করতে হয়েছিল। সুতরাং পিতা বা মাতার কাছ থেকে সন্তানের কাছে প্রোপটি নামানো কোনও বিকল্প ছিল না, সুতরাং এই সমাধানটি কৌশলটি করেছিল!

— জন

নবাগত প্রশ্ন: কেন প্রপ তৈরিরref পরিবর্তে ব্যবহার করুন, যেটির মানটি দেখে তার পিতামাতার অন্য ফাংশনে এটি নির্গত হয়? আমি বলতে চাইছি এতে অনেক কিছু করার আছে তবে এটি কি refনিরাপদ ব্যবহার করছে ? ধন্যবাদ

— ইরফ্যান্ডি জিপ

@ ইরফ্যান্ডি জিপ - হ্যাঁ, refনিরাপদ। সাধারণত, এটি নিরুৎসাহিত করা হয় কারণ ভ্যু সম্প্রদায় শিশুদের কাছে রাষ্ট্র এবং মাতৃত্বের কাছে ইভেন্টগুলি ফিরে যেতে পছন্দ করে। সাধারণত বললে, এটি আরও বিচ্ছিন্ন, অভ্যন্তরীণভাবে সামঞ্জস্যপূর্ণ উপাদানগুলি (একটি ভাল জিনিস to) বাড়ে। তবে, আপনি যদি সন্তানের কাছে যে তথ্যটি পাঠাচ্ছেন তা যদি সত্যিই কোনও ইভেন্ট (বা একটি আদেশ) হয় তবে রাষ্ট্র পরিবর্তন করা সঠিক প্যাটার্ন নয়। সেক্ষেত্রে একটি পদ্ধতি ব্যবহার করে কল refকরা সম্পূর্ণরূপে ভাল, এবং এটি ক্রাশ বা কোনও কিছুই ঘটবে না।

— জেরিক

Answer 2

আপনি যা বর্ণনা করছেন তা হ'ল পিতামাতার রাজ্যের পরিবর্তন। আপনি একটি প্রপ মাধ্যমে এটি সন্তানের কাছে পৌঁছে দিন। আপনি যেমন পরামর্শ দিয়েছেন, আপনি সেই প্রস্তাব পাবেন watch। শিশু যখন পদক্ষেপ নেয়, তখন এটি একটি মাধ্যমে পিতামাতাকে জানায় এবং পিতামাতারা emitআবার রাষ্ট্র পরিবর্তন করতে পারেন।

var Child = {
  template: '<div>{{counter}}</div>',
  props: ['canI'],
  data: function () {
    return {
      counter: 0
    };
  },
  watch: {
    canI: function () {
      if (this.canI) {
        ++this.counter;
        this.$emit('increment');
      }
    }
  }
}
new Vue({
  el: '#app',
  components: {
    'my-component': Child
  },
  data: {
    childState: false
  },
  methods: {
    permitChild: function () {
      this.childState = true;
    },
    lockChild: function () {
      this.childState = false;
    }
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
<div id="app">
<my-component :can-I="childState" v-on:increment="lockChild"></my-component>
<button @click="permitChild">Go</button>
</div>

যদি আপনি সত্যিকার অর্থে কোনও সন্তানের কাছে ইভেন্টগুলি পাস করতে চান তবে আপনি এটি একটি বাস তৈরি করে করতে পারেন (যা কেবলমাত্র একটি মূল্য উদাহরণ) এবং সন্তানের কাছে প্রপোস হিসাবে এটি পাস করে ।

Comments

আমি মনে করি এটি অফিশিয়াল ভ্যু.জেএস স্টাইল গাইড এবং সেরা অনুশীলনের সাথে একমাত্র উত্তর। আপনি যদি v-modelউপাদানটিতে শর্টহ্যান্ড ব্যবহার করেন তবে আপনি কম কোডের সাথে সংশ্লিষ্ট ইভেন্টটি নির্ধারণ করে খুব সহজেই মানটি পুনরায় সেট করতে পারেন।

— ফ্যালকো

উদাহরণস্বরূপ, যখন কোনও ব্যবহারকারী কোনও বোতাম টিপায় তখন আমি একটি সতর্কতা দিতে চাই। আপনি উদাহরণস্বরূপ প্রস্তাব দিচ্ছেন: - একটি পতাকা দেখুন - একটি পতাকা দেখা দিলে এই পতাকাটি 0 থেকে 1 পর্যন্ত সেট করুন, - কিছু করুন - পতাকাটি পুনরায় সেট করুন

— সিনান এরডেম

এটি খুব অস্বস্তিকর, আপনাকে propকোনও সন্তানের অতিরিক্ত তৈরি করতে হবে , বাড়তি একটি সম্পত্তি তৈরি করতে হবে data, তারপরে যুক্ত করুন watch... পিতামাতার কাছ থেকে সন্তানের কাছে কোনওভাবে ঘটনা স্থানান্তর করতে অন্তর্নির্মিত সমর্থন থাকলে আরামদায়ক হবে। এই পরিস্থিতি প্রায়শই ঘটে।

— Зеленько

@ By দ্বারা রাষ্ট্র হিসাবে, এটি প্রায়শই ঘটে থাকে, এখনই এটি একটি গডসেন্ড হবে।

— ক্রেগ

ধন্যবাদ @ রায়জে, আমি অনুমান করি যে যখন শিশুটি সাবস্ক্রাইব করে তবে বাসের প্রপাগুলির উপস্থিতি প্রয়োজন, আমি মনে করি শিশুদের কাছে ইভেন্টগুলি প্রেরণের পুরো ধারণাটি ভ্যুতে নিরুৎসাহিত হয়েছে।

— বেন উইন্ডিং

Answer 3

আপনি ব্যবহার করতে পারেন $emitএবং $on। @ রয়জে কোড ব্যবহার:

এইচটিএমএল:

<div id="app">
  <my-component></my-component>
  <button @click="click">Click</button>  
</div>

জাভাস্ক্রিপ্ট:

var Child = {
  template: '<div>{{value}}</div>',
  data: function () {
    return {
      value: 0
    };
  },
  methods: {
    setValue: function(value) {
        this.value = value;
    }
  },
  created: function() {
    this.$parent.$on('update', this.setValue);
  }
}

new Vue({
  el: '#app',
  components: {
    'my-component': Child
  },
  methods: {
    click: function() {
        this.$emit('update', 7);
    }
  }
})

চলমান উদাহরণ: https://jsfiddle.net/rjurado/m2spy60r/1/

Comments

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

— jbodily

এটিকে সেরা উপায়ে বিবেচনা করা নাও যেতে পারে, আমি জানি না, তবে আপনি যদি জানেন তবে আপনি কী করছেন আমি বিষয়টি হুমকির মধ্যে পড়ে না। অন্য উপায়টি

— মদ্যপানকারী

এটি শিশু এবং পিতামাতার মধ্যে সংযোগ তৈরি করে এবং এটি খারাপ অনুশীলন হিসাবে বিবেচিত হয়

— মরিরিস্ল্যাপটপ

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

— জুলিও রডরিগস

@ বিজনিয়েন এটিকে কল করুন $ পিতামাতা এই উপাদানটিকে পিতামাতার উপর নির্ভরশীল করে তোলে। প্রেমে ব্যবহার করে প্রপস ব্যবহার করে তাই কেবলমাত্র নির্ভরতা ভের যোগাযোগ ব্যবস্থার মাধ্যমে। এই পদ্ধতিটি একই উপাদানটিকে উপাদান উপাদানক্রমক্রমের যে কোনও জায়গায় ব্যবহার করার অনুমতি দেয়।

— মরিিস্ল্যাপটপ

Answer 4

আপনার যদি সময় থাকে তবে ভেরিয়েবল (ওরফে স্টেট) বা ট্রিগার (ওরফে প্রেরণ) সরাসরি কোনও ক্রিয়া দেখার জন্য ভেক্স স্টোর ব্যবহার করুন।

Comments

Vuejs / vuex এর প্রতিক্রিয়াশীলতার কারণে যা সেরা aproach, পিতামাতার মধ্যে এমন একটি ক্রিয়া / মিউটেশন তৈরি করে যা একটি ভয়েক্স সম্পত্তি মান পরিবর্তন করে এবং সন্তানের মধ্যে এমন একটি গুণিত মান থাকে যা এই একই ভ্যুক্স $ store.state.property.value বা "ঘড়ি" লাভ করে "method store.state.property.value" পরিবর্তিত হলে "পদ্ধতি যে কিছু করে

— ফেবিয়ানসিলভা

Answer 5

ভালো লাগে নি ঘটনা-বাস পদ্ধতির ব্যবহার $onসময় সন্তানের বাইন্ডিং create। কেন? পরবর্তী createকলগুলি (আমি ব্যবহার করছি vue-router) বার্তা হ্যান্ডলারটিকে একাধিক বার আবদ্ধ করুন - প্রতি বার্তাটিতে একাধিক প্রতিক্রিয়া বাড়ে।

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

আমি খুঁজে পেয়েছি যে আমি যদি একটি অ্যারেতে বার্তাটি গুটিয়ে রাখি তবে এটি সর্বদা শিশু পর্যবেক্ষককে ট্রিগার করবে - মানটি একই থাকলেও।

মূল:

{
   data: function() {
      msgChild: null,
   },
   methods: {
      mMessageDoIt: function() {
         this.msgChild = ['doIt'];
      }
   }   
   ...
}

শিশুঃ

{
   props: ['msgChild'],
   watch: {
      'msgChild': function(arMsg) {
         console.log(arMsg[0]);
      }
   }
}

এইচটিএমএল:

<parent>
   <child v-bind="{ 'msgChild': msgChild }"></child>
</parent>

Comments

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

— জর্জে সেনজ

@ জর্জেসাইনজ: এ কারণেই আমি ডেটা আইটেমটি অর্পণ করার আগে একটি অ্যারেতে মানটি গুটিয়ে রাখছি। একটি অ্যারেতে মানটি মোড়ানো ছাড়াই এটি আপনার নির্দিষ্ট করে যেমন আচরণ করে। সুতরাং, _চিহিল্ড = সত্য, _ চিত্র = সত্য - কোনও ইভেন্ট নেই। msgChild = [সত্য], # চিত্র = [সত্য] - ইভেন্ট!

— জেসন স্টুয়ার্ট

আমি তা দেখিনি। স্পষ্টতার জন্য ধন্যবাদ

— জোর্স সায়ান্জ

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

— ক্রেগ

Answer 6

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

var Child = {
  template: '<div>{{value}}</div>',
  data: function () {
    return {
      value: 0
    };
  },
  methods: {
  	setValue(value) {
    	this.value = value;
    }
  },
  created() {
    this.$emit('handler', this.setValue);
  }
}

new Vue({
  el: '#app',
  components: {
    'my-component': Child
  },
  methods: {
  	setValueHandler(fn) {
    	this.setter = fn
    },
    click() {
    	this.setter(70)
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<div id="app">
  <my-component @handler="setValueHandler"></my-component>
  <button @click="click">Click</button>  
</div>

অভিভাবকরা শিশু হ্যান্ডলার ফাংশন এবং কল যখনই প্রয়োজন কল করে রাখেন of

Comments

আমি পছন্দ করি যেখানে এই সমাধানটি চলছে তবে পিতামাতার মধ্যে "this.setter" ঠিক কী?

— ক্রেগ

এটি হ্যান্ডলারের ইভেন্টের আর্গুমেন্ট হিসাবে শিশু উপাদান দ্বারা নির্গত সেটভ্যালু ফাংশন রেফারেন্স।

— নিলোবার্প

Answer 7

নীচের উদাহরণটি স্ব-বর্ণনামূলক। যেখানে রেফারেন্স এবং ইভেন্টগুলি পিতামাতা এবং সন্তানের কাছ থেকে এবং ফাংশনে কল করতে ব্যবহৃত হতে পারে।

// PARENT
<template>
  <parent>
    <child
      @onChange="childCallBack"
      ref="childRef"
      :data="moduleData"
    />
    <button @click="callChild">Call Method in child</button>
  </parent>
</template>

<script>
export default {
  methods: {
    callChild() {
      this.$refs.childRef.childMethod('Hi from parent');
    },
    childCallBack(message) {
      console.log('message from child', message);
    }
  }
};
</script>

// CHILD
<template>
  <child>
    <button @click="callParent">Call Parent</button>
  </child>
</template>

<script>
export default {
  methods: {
    callParent() {
      this.$emit('onChange', 'hi from child');
    },
    childMethod(message) {
      console.log('message from parent', message);
    }
  }
}
</script>

Answer 8

আমি মনে করি বাচ্চার পদ্ধতিগুলি ব্যবহার করার জন্য পিতামাতার প্রয়োজনীয়তা সম্পর্কে আমাদের বিবেচনা করা উচিত fact বাস্তবে, পিতামাতাদের সন্তানের পদ্ধতি সম্পর্কে চিন্তা করার দরকার নেই, তবে সন্তানের উপাদানটিকে এফএসএ (সসীম রাষ্ট্রের মেশিন) হিসাবে বিবেচনা করতে পারেন are প্যারেন্টস উপাদান সন্তানের উপাদানগুলির অবস্থা নিয়ন্ত্রণ করতে status পরিস্থিতি পরিবর্তন দেখার সমাধান করুন বা কেবল গণনা ফাংশনটি ব্যবহার করা যথেষ্ট

Comments

যদি আপনি বলছেন যে "বাবা-মায়েরা তাদের কখনই বাচ্চাদের নিয়ন্ত্রণের বিষয়ে উদ্বিগ্ন হওয়া উচিত নয়", এমন ঘটনাও রয়েছে যেখানে এটি প্রয়োজনীয়। একটি কাউন্টডাউন টাইমার উপাদান বিবেচনা করুন। অভিভাবকরা টাইমারটি পুনরায় শুরু করতে পুনরায় সেট করতে চাইতে পারেন। কেবল প্রপস ব্যবহার করা যথেষ্ট নয় কারণ সময় = 60 থেকে সময় = 60 থেকে প্রপসটি পরিবর্তন করবে না। টাইমারকে এমন একটি 'রিসেট' ফাংশন প্রকাশ করা উচিত যা অভিভাবকরা যথাযথভাবে কল করতে পারে।

— টিবিএম

Answer 9

আপনি কী ব্যবহার করে শিশু উপাদান পুনরায় লোড করতে কী ব্যবহার করতে পারেন

<component :is="child1" :filter="filter" :key="componentKey"></component>

আপনি যদি নতুন ফিল্টার সহ উপাদানটি পুনরায় লোড করতে চান, বাটন ক্লিক করে চাইল্ড উপাদানটি ফিল্টার করুন

reloadData() {            
   this.filter = ['filter1','filter2']
   this.componentKey += 1;  
},

এবং ফাংশন ট্রিগার করতে ফিল্টার ব্যবহার করুন