Vue.js 2-তে প্রাথমিক তথ্য হিসাবে প্রপসগুলি পাস করার সঠিক উপায় কী?

Question 1

সুতরাং আমি একটি ভ্যু উপাদানগুলিতে প্রপসগুলি পাস করতে চাই, তবে আমি প্রত্যাশা করি ভবিষ্যতে এই উপাদানগুলির অভ্যন্তর থেকে পরিবর্তন হবে যেমন আমি যখন এ ভ্যাক্স উপাদানটি এজেএক্স ব্যবহার করে ভিতরে থেকে আপডেট করি। সুতরাং তারা কেবল উপাদান সূচনা করার জন্য।

আমার cars-listভ্যু উপাদান উপাদান যেখানে আমি প্রাথমিক বৈশিষ্ট্যগুলির সাথে প্রপসগুলি এখানে পাস করি single-car:

// cars-list.vue

<script>
    export default {
        data: function() {
            return {
                cars: [
                    {
                        color: 'red',
                        maxSpeed: 200,
                    },
                    {
                        color: 'blue',
                        maxSpeed: 195,
                    },
                ]
            }
        },
    }
</script>

<template>
    <div>
        <template v-for="car in cars">
            <single-car :initial-properties="car"></single-car>
        </template>
    </div>
</template>

আমি এখনই এটা করতে যে আমার ভিতরে single-carউপাদান আমি বরাদ্দ করছি this.initialPropertiesআমার থেকে this.data.propertiesউপর created()আরম্ভের হুক। এবং এটি কাজ করে এবং প্রতিক্রিয়াশীল।

// single-car.vue

<script>
    export default {
        data: function() {
            return {
                properties: {},
            }
        },
        created: function(){
            this.data.properties = this.initialProperties;
        },
    }
</script>

<template>
    <div>Car is in {{properties.color}} and has a max speed of {{properties.maxSpeed}}</div>
</template>

তবে তার সাথে আমার সমস্যাটি হ'ল আমি জানি না যে এটি করার সঠিক উপায় কিনা? এটা কি রাস্তা দিয়ে কিছু ঝামেলা সৃষ্টি করবে না? নাকি এটি করার আরও ভাল উপায় আছে?

Question 2

এই https://github.com/vuejs/vuejs.org/pull/567 ধন্যবাদ আমি এখন উত্তর জানি।

পদ্ধতি 1

প্রাথমিক উপাত্ত সরাসরি ডেটাতে পাস করুন। আপডেট হওয়া ডক্সে উদাহরণটি পছন্দ করুন:

props: ['initialCounter'],
data: function () {
    return {
        counter: this.initialCounter
    }
}

তবে মনে রাখবেন যে যদি পাস করা প্রোপ কোনও অবজেক্ট বা অ্যারে হয় যা প্যারেন্ট উপাদানগুলিতে ব্যবহৃত হয় তবে সেই প্রপগুলিতে কোনও পরিবর্তন হলে সেই প্যারেন্ট উপাদানটির অবস্থার পরিবর্তন ঘটবে।

সতর্কতা : এই পদ্ধতিটি সুপারিশ করা হয় না। এটি আপনার উপাদানগুলি অনির্দেশ্য করে তুলবে। আপনার যদি সন্তানের উপাদানগুলি থেকে পিতামাতাদের ডেটা সেট করতে হয় হয় হয় ভিউক্সের মতো রাজ্য পরিচালনা ব্যবহার করুন বা "ভি-মডেল" ব্যবহার করুন। https://vuejs.org/v2/guide/components.html#Using-v-model-on- উপাদান

পদ্ধতি 2

যদি আপনার প্রারম্ভিক প্রপ কোনও বস্তু বা অ্যারে হয় এবং আপনি যদি চান না বাচ্চাদের রাজ্যের পরিবর্তনগুলি পিতামাতার রাজ্যে প্রচার করুন তবে কেবল Vue.util.extendপ্রসগুলির একটি অনুলিপি তৈরির পরিবর্তে এটি সরাসরি বাচ্চাদের ডেটাতে নির্দেশ করে ব্যবহার করুন:

props: ['initialCounter'],
data: function () {
    return {
        counter: Vue.util.extend({}, this.initialCounter)
    }
}

পদ্ধতি 3

প্রপস ক্লোন করতে আপনি স্প্রেড অপারেটরও ব্যবহার করতে পারেন। ইগরের উত্তরে আরও বিশদ: https://stackoverflow.com/a/51911118/3143704

তবে মনে রাখবেন স্প্রেড অপারেটরগুলি পুরানো ব্রাউজারগুলিতে সমর্থিত নয় এবং আরও ভাল সামঞ্জস্যের জন্য আপনাকে কোডটি ট্রান্সপ্লাই করতে হবে যেমন ব্যবহার করে babel।

পাদটীকা

[1] মনে রাখবেন এটি একটি অভ্যন্তরীণ ভ্যূ ইউটিলিটি এবং এটি নতুন সংস্করণে পরিবর্তিত হতে পারে। সেই প্রপটি অনুলিপি করতে আপনি অন্যান্য পদ্ধতি ব্যবহার করতে চাইতে পারেন, " আমি কীভাবে জাভাস্ক্রিপ্ট অবজেক্টটিকে সঠিকভাবে ক্লোন করব? " দেখুন।

আমার পরীক্ষাটি যেখানে আমি এটি পরীক্ষা করছিলাম: https://jsfiddle.net/sm4kx7p9/3/

Question 3

@ ডেমোকিক-সেরাফিনের উত্তরটির সহকর্মী:

আপনি যদি কোনও বস্তুটি পাস করছেন তবে আপনি স্প্রেড অপারেটর (ES6 সিনট্যাক্স) ব্যবহার করে সহজেই এটি ক্লোন করতে পারেন:

 props: {
   record: {
     type: Object,
     required: true
   }
 },

data () { // opt. 1
  return {
    recordLocal: {...this.record}
  }
},

computed: { // opt. 2
  recordLocal () {
    return {...this.record}
  }
},

তবে সবচেয়ে গুরুত্বপূর্ণ হ'ল অপ্টটি ব্যবহার করা মনে রাখা। 2 যদি আপনি একটি গণিত মান, বা তার চেয়েও বেশি একটি অ্যাসিনক্রোনাস মানকে দিয়ে যাচ্ছেন। অন্যথায় স্থানীয় মান আপডেট হবে না।

ডেমো:

Vue.component('card', { 
  template: '#app2',
  props: {
    test1: null,
    test2: null
  },
  data () { // opt. 1
    return {
      test1AsData: {...this.test1}
    }
  },
  computed: { // opt. 2
    test2AsComputed () {
      return {...this.test2}
    }
  }
})

new Vue({
  el: "#app1",
  data () {
    return {
      test1: {1: 'will not update'},
      test2: {2: 'will update after 1 second'}
    }
  },
  mounted () {
    setTimeout(() => {
      this.test1 = {1: 'updated!'}
      this.test2 = {2: 'updated!'}
    }, 1000)
  }
})

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

<div id="app1">
  <card :test1="test1" :test2="test2"></card>
</div>

<template id="app2">
  <div>
    test1 as data: {{test1AsData}}
    <hr />
    test2 as computed: {{test2AsComputed}}
  </div>
</template>

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

https://jsfiddle.net/nomikos3/eywraw8t/281070/

Question 4

আমি বিশ্বাস করি আপনি এটি সঠিকভাবে করছেন কারণ ডক্সে যা বলা হয়েছে তা তাই।

একটি স্থানীয় ডেটা সম্পত্তি ব্যাখ্যা করুন যা প্রপের প্রাথমিক মানটিকে তার প্রাথমিক মান হিসাবে ব্যবহার করে

https://vuejs.org/guide/components.html#One- ওয়েভ- ডেটা- ফ্লো