Vue.js তে উপাদানগুলিতে ডেটা পাঠানো

Question 1

আমি vue.js. তে উপাদানগুলির মধ্যে ডেটা কীভাবে পাস করব তা বোঝার জন্য সংগ্রাম করছি আমি ডক্সটি বেশ কয়েকবার পড়েছি এবং অনেকগুলি সম্পর্কিত প্রশ্ন এবং টিউটোরিয়াল দেখেছি, তবে আমি এখনও এটি পাই না getting

এই সম্পর্কে আমার মাথাটি গুটিয়ে নিতে, আমি একটি খুব সাধারণ উদাহরণটি সম্পূর্ণ করতে সহায়তা আশা করছি ing

একটি উপাদান ব্যবহারকারীর একটি তালিকা প্রদর্শন (সম্পন্ন)
কোনও লিঙ্ক ক্লিক করা হলে (সম্পন্ন) হয়ে গেলে ব্যবহারকারী ডেটাটি কোনও নতুন উপাদানকে প্রেরণ করুন - নীচে আপডেট দেখুন।
ব্যবহারকারীর ডেটা সম্পাদনা করুন এবং এটিকে মূল উপাদানটিতে ফেরত পাঠান (এখন পর্যন্ত এটি অর্জিত হয়নি)

এখানে একটি ফিজল রয়েছে, যা দ্বিতীয় ধাপে ব্যর্থ হয়েছে: https://jsfiddle.net/retrogradeMT/d1a8hps0/

আমি বুঝতে পারি যে নতুন উপাদানটিতে ডেটা প্রেরণের জন্য আমার প্রপস ব্যবহার করা দরকার, তবে কীভাবে এটি কার্যকরভাবে করবেন তা নিশ্চিত নই। আমি কীভাবে নতুন উপাদানটিকে ডেটা বাঁধবো?

এইচটিএমএল:

    <div id="page-content">
       <router-view></router-view>
     </div>

 <template id="userBlock" >
   <ul>
     <li v-for="user in users">{{user.name}} - <a v-link="{ path: '/new' }"> Show new component</a>
     </li>
   </ul>
 </template>

  <template id="newtemp" :name ="{{user.name}}">
    <form>
      <label>Name: </label><input v-model="name">
      <input type="submit" value="Submit">
    </form>
  </template>

প্রধান উপাদান জন্য জেএস:

Vue.component('app-page', {
  template: '#userBlock',

  data: function() {
    return{

        users: []
      }
    },

ready: function () {
    this.fetchUsers();
},

methods: {
    fetchUsers: function(){
        var users = [
          {
            id: 1,
            name: 'tom'
          },
          {
            id: 2,
            name: 'brian'
          },
          {
            id: 3,
            name: 'sam'
          },
        ];

        this.$set('users', users);
     }
    }
  })

দ্বিতীয় উপাদান জন্য জেএস:

Vue.component('newtemp', {
  template: '#newtemp',
  props: 'name',
  data: function() {
    return {
        name: name,
        }
   },
})

হালনাগাদ

ঠিক আছে, আমি দ্বিতীয় ধাপটি খুঁজে পেয়েছি। অগ্রগতিটি দেখানোর জন্য এখানে একটি নতুন ফিডল রয়েছে: https://jsfiddle.net/retrogradeMT/9pffnmjp/

যেহেতু আমি ভ্যু-রাউটার ব্যবহার করছি, আমি কোনও নতুন উপাদানকে ডেটা প্রেরণের জন্য প্রপস ব্যবহার করি না। পরিবর্তে, আমার ভি-লিঙ্কে প্যারামগুলি সেট করতে হবে এবং তারপরে এটি গ্রহণ করার জন্য একটি ট্রানজিশন হুক ব্যবহার করুন।

ভি-লিঙ্ক পরিবর্তনগুলি ভ্যু-রাউটার ডক্সে নামযুক্ত রুটগুলি দেখে :

<a v-link="{ name: 'new', params: { name: user.name }}"> Show new component</a>

তারপরে উপাদানটিতে, রুটের বিকল্পগুলিতে ডেটা যুক্ত করুন ট্রানজিশন হুকগুলি দেখুন :

Vue.component('newtemp', {
  template: '#newtemp',
  route: {
   data: function(transition) {
        transition.next({
            // saving the id which is passed in url
            name: transition.to.params.name
        });
     }
  },
 data: function() {
    return {
        name:name,
        }
   },
})

Question 2

------------- নিম্নলিখিতটি কেবলমাত্র ভ্যূ 1 -------------- এ প্রযোজ্য

পাসিং ডেটা একাধিক উপায়ে করা যেতে পারে। পদ্ধতিটি ব্যবহারের ধরণের উপর নির্ভর করে।

আপনি যদি কোনও নতুন উপাদান যুক্ত করার সময় আপনার এইচটিএমএল থেকে ডেটা পাস করতে চান তবে। প্রপস ব্যবহার করে এটি করা হয়।

<my-component prop-name="value"></my-component>

এই প্রোপ মানটি কেবলমাত্র আপনার উপাদানটির জন্য উপলব্ধ যদি আপনি prop-nameনিজের propsবৈশিষ্ট্যের সাথে প্রোপের নাম যুক্ত করেন ।

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

<my-parent>
    <my-child-A></my-child-A>
    <my-child-B></my-child-B>
</my-parent>

এবং আপনার কাছ থেকে তথ্য পাঠাতে চান <my-child-A>করতে <my-child-B>তারপর <my-child-A>আপনি একটি ইভেন্ট প্রাণবধ হবে:

this.$dispatch('event_name', data);

এই ইভেন্টটি প্যারেন্ট চেইন পর্যন্ত সমস্ত পথ ভ্রমণ করবে। এবং যে কোনও পিতা-মাতার কাছ থেকে আপনার কাছে একটি শাখা রয়েছে <my-child-B>সেই ডেটা সহ ইভেন্টটি সম্প্রচার করে। পিতামাতায় তাই:

events:{
    'event_name' : function(data){
        this.$broadcast('event_name', data);
    },

এখন এই সম্প্রচারটি চাইল্ড চেইনে ভ্রমণ করবে। এবং যে কোনও শিশু আপনি ইভেন্টটি দখল করতে চান, আমাদের ক্ষেত্রে <my-child-B>আমরা আরও একটি ইভেন্ট যুক্ত করব:

events: {
    'event_name' : function(data){
        // Your code. 
    },
},

ডেটা পাস করার তৃতীয় উপায়টি হ'ল ভি-লিঙ্কগুলির পরামিতিগুলির মাধ্যমে। উপাদান চেইনগুলি সম্পূর্ণরূপে ধ্বংস হয়ে যায় বা যখন ইউআরআই পরিবর্তন হয় তখন এই পদ্ধতিটি ব্যবহৃত হয়। এবং আমি দেখতে পাচ্ছি আপনি ইতিমধ্যে সেগুলি বুঝতে পেরেছেন।

আপনি কী ধরনের ডেটা যোগাযোগ করতে চান তা সিদ্ধান্ত নিন এবং যথাযথভাবে চয়ন করুন।

Question 3

সন্তানের কাছে পিতামাতাদের উপাদান থেকে ডেটা প্রেরণের সর্বোত্তম উপায় হ'ল প্রপস ব্যবহার করা ।

মাধ্যমে পিতামাতার কাছ থেকে সন্তানের কাছে ডেটা পাঠানো `props`

সন্তানের মধ্যে ঘোষণা props(অ্যারে বা অবজেক্ট )
এটি মাধ্যমে সন্তানের হাতে দিন <child :name="variableOnParent">

নীচে ডেমো দেখুন:

Vue.component('child-comp', {
  props: ['message'], // declare the props
  template: '<p>At child-comp, using props in the template: {{ message }}</p>',
  mounted: function () {
    console.log('The props are also available in JS:', this.message);
  }
})

new Vue({
  el: '#app',
  data: {
    variableAtParent: 'DATA FROM PARENT!'
  }
})

<script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script>

<div id="app">
  <p>At Parent: {{ variableAtParent }}<br>And is reactive (edit it) <input v-model="variableAtParent"></p>
  <child-comp :message="variableAtParent"></child-comp>
</div>

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

Question 4

আমি মনে করি সমস্যাটি এখানে রয়েছে:

<template id="newtemp" :name ="{{user.name}}">

আপনি যখন প্রপসটি প্রিফিক্স করেন তখন আপনার সাথে :ভুতে ইঙ্গিত করা হয় যে এটি স্ট্রিং নয়, একটি পরিবর্তনশীল। সুতরাং আপনার {{}}চারপাশের দরকার নেই user.name। চেষ্টা করুন:

<template id="newtemp" :name ="user.name">

সম্পাদনা -----

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

Question 5

আমি ভ্যুতে প্যারেন্ট ডেটাগুলি উপাদান স্কোপে পাস করার একটি উপায় খুঁজে পেয়েছি, আমি মনে করি এটি কিছুটা হ্যাক তবে সম্ভবত এটি আপনাকে সহায়তা করবে।

1) একটি বাহ্যিক বস্তু হিসাবে ভ্যু ইনস্ট্যান্সে রেফারেন্স ডেটা (data : dataObj)

2) তারপরে ডাটা রিটার্ন ফাংশনে শিশু উপাদানটিতে কেবল ফিরে parentScope = dataObjআসুন এবং ভয়েলা। এখন আপনি মনোযোগের মতো {{ parentScope.prop }}কাজ করতে পারবেন না এবং মনোযোগের মতো কাজ করবেন।

শুভকামনা!

Question 6

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

2 উপাদানগুলির জন্য অনুমান করুন: মূল vue অ্যাপ্লিকেশন সেটআপের জন্য একই প্যারেন্ট এবং মেইন.জেএস থাকা কমপএ এবং কমপিব অভিভাবক উপাদানকে জড়িত না করে কম্পিউটার থেকে কমপ্যাব থেকে ডেটা পাস করার জন্য আপনি নিম্নলিখিতটি করতে পারেন।

main.js ফাইলে, একটি পৃথক গ্লোবাল ভ্যু উদাহরণ ঘোষণা করুন, এটি ইভেন্টের বাস হবে।

export const bus = new Vue();

কম্পিউটারে, যেখানে ইভেন্টটি উত্পন্ন হয়: আপনাকে ইভেন্টটি বাসে ছাড়তে হবে।

methods: {
      somethingHappened (){
          bus.$emit('changedSomething', 'new data');
      }
  }

এখন কাজটি হল নির্গত ইভেন্টটি শোনার জন্য, তাই, কমপিবিতে, আপনি শুনতে পছন্দ করতে পারেন।

created (){
    bus.$on('changedSomething', (newData) => {
      console.log(newData);
    })
  }

সুবিধাদি:

কম এবং পরিষ্কার কোড।
পিতা-মাতার 1 সন্তানের কম্পিউটার থেকে অন্যটিতে ডেটা দেওয়ার ক্ষেত্রে জড়িত থাকা উচিত নয় (বাচ্চাদের সংখ্যা বাড়ার সাথে সাথে এটি বজায় রাখা শক্ত হবে)
পাব-সাব পদ্ধতির অনুসরণ করে।

Question 7

আমি ব্যবহার করে প্রধান বৈশিষ্ট্য অ্যাক্সেস $root।

Vue.component("example", { 
    template: `<div>$root.message</div>`
});
...
<example></example>

Question 8

উপাদানগুলির মধ্যে ডেটা পাস করার জন্য একটি গ্লোবাল জেএস ভেরিয়েবল (অবজেক্ট) ব্যবহার করা যেতে পারে। উদাহরণ: Ammlogin.vue থেকে Data.vue এ ডেটা পাস করা। Ammlogin.vue এ আরএসপি ডেটা সার্ভারের প্রতিক্রিয়াতে সেট করা আছে। অপশন.ভয়ে সার্ভারের প্রতিক্রিয়াটি আরএসপিডেটার মাধ্যমে উপলব্ধ করা হয়েছে।

index.html:

<script>
    var rspData; // global - transfer data between components
</script>

Ammlogin.vue:

....    
export default {
data: function() {return vueData}, 
methods: {
    login: function(event){
        event.preventDefault(); // otherwise the page is submitted...
        vueData.errortxt = "";
        axios.post('http://vueamm...../actions.php', { action: this.$data.action, user: this.$data.user, password: this.$data.password})
            .then(function (response) {
                vueData.user = '';
                vueData.password = '';
                // activate v-link via JS click...
                // JSON.parse is not needed because it is already an object
                if (response.data.result === "ok") {
                    rspData = response.data; // set global rspData
                    document.getElementById("loginid").click();
                } else {
                    vueData.errortxt = "Felaktig avändare eller lösenord!"
                }
            })
            .catch(function (error) {
                // Wu oh! Something went wrong
                vueData.errortxt = error.message;
            });
    },
....

অপশন.ভ্যু:

<template>
<main-layout>
  <p>Alternativ</p>
  <p>Resultat: {{rspData.result}}</p>
  <p>Meddelande: {{rspData.data}}</p>
  <v-link href='/'>Logga ut</v-link>
</main-layout>
</template>
<script>
 import MainLayout from '../layouts/Main.vue'
 import VLink from '../components/VLink.vue'
 var optData = { rspData: rspData}; // rspData is global
 export default {
   data: function() {return optData},
   components: {
     MainLayout,
     VLink
   }
 }
</script>

Vue.js তে উপাদানগুলিতে ডেটা পাঠানো

মাধ্যমে পিতামাতার কাছ থেকে সন্তানের কাছে ডেটা পাঠানো props

মাধ্যমে পিতামাতার কাছ থেকে সন্তানের কাছে ডেটা পাঠানো `props`