ভিউজেএস-এ গতিশীল উপাদানটিতে গতিশীল প্রপস পাস করা

Question

আমি একটি গতিশীল দৃশ্য:

<div id="myview">
  <div :is="currentComponent"></div>
</div>

সম্পর্কিত ভ্যু উদাহরণ সহ:

new Vue ({
  data: function () {
    return {
      currentComponent: 'myComponent',
    }
  },
}).$mount('#myview');

এটি আমাকে আমার উপাদানটিকে পরিবর্তনশীলভাবে পরিবর্তন করতে দেয়।

আমার ক্ষেত্রে, আমি তিনটি ভিন্ন উপাদান আছে: myComponent, myComponent1, এবং myComponent2। এবং আমি তাদের মধ্যে এইভাবে পরিবর্তন করি:

Vue.component('myComponent', {
  template: "<button @click=\"$parent.currentComponent = 'myComponent1'\"></button>"
}

এখন, আমি সাজসরঞ্জাম পাস করতে চাই myComponent1।

আমি যখন উপাদানগুলির ধরন পরিবর্তন করি তখন কীভাবে আমি এই প্রপসগুলি পাস করতে পারি myComponent1?

Comments

আপনি উপাদানটির বৈশিষ্ট্যগুলির মাধ্যমে প্রপসগুলি পাস করেন propName="propValue"। এটা কি আপনার প্রশ্ন?

— ধন্যবাদ 13

আমি কখনই লিখতে <myComponent1 propName="propValue">পারি না কারণ আমি প্রোগ্রামটিমেটিকভাবে উপাদানটি পরিবর্তন করি$parent.currentComponent = componentName

— এপিটিউইল

হ্যাঁ কিন্তু আপনি লিখুন <div :is="currentComponent"></div>। আপনি যেখানে গুণটি যুক্ত করবেন সেখানে That's

— ধন্যবাদ 13

হ্যাঁ তবে প্রপস উপাদানটির উপর নির্ভর করে। উদাহরণস্বরূপ, myComponent1myComponent2

— প্রপস

Answer 1

প্রসেসকে গতিশীলভাবে পাস করতে, আপনি v-bindআপনার গতিশীল উপাদানটিতে নির্দেশিকা যুক্ত করতে পারেন এবং আপনার প্রপ নাম এবং মান সহ একটি বস্তু পাস করতে পারেন :

সুতরাং আপনার গতিশীল উপাদানটি দেখতে এইরকম হবে:

<component :is="currentComponent" v-bind="currentProperties"></component>

এবং আপনার মান উদাহরণে, currentPropertiesবর্তমান উপাদানটির উপর ভিত্তি করে পরিবর্তন করতে পারে:

data: function () {
  return {
    currentComponent: 'myComponent',
  }
},
computed: {
  currentProperties: function() {
    if (this.currentComponent === 'myComponent') {
      return { foo: 'bar' }
    }
  }
}   

তাই এখন, যখন currentComponentহয় myComponent, এটি একটি থাকবে fooসম্পত্তিতে সমান 'bar'। এবং যখন এটি না হয়, কোনও সম্পত্তি পাস করা হবে না।

Comments

কেন এটি আমার জন্য কাজ করছে না? এটি প্রথম উপাদানটির জন্য কাজ করে, তবে আমি "কারেন্ট কম্পোনেন্ট" পরিবর্তন করার পরে আমি একটি "ই-কর্নারপ্রপ্রেটিস" পেয়েছি বাচ্চাদের উপাদানগুলির উপর অপরিজ্ঞাত।

— রিকার্ডো ভিগতি

@ রিকার্ডো ভিগাত্তি, আপনার কোনও কোড না দেখে, এটি জানা বেশ কঠিন

— ধন্যবাদ

আরে, আমি যদি কিছু যুক্ত করতে চাই <component>(here)</component>। এটা কি সম্ভব?

— ফিলিপ মোরেলস

@ ফিলিপমোরালস, হ্যাঁ, আপনি <slot>গতিশীলভাবে রেন্ডারিং করছেন এমন প্রতিটি উপাদানগুলির জন্য আপনাকে কেবল একটি ডিফল্ট নির্ধারণ করতে হবে। vuejs.org/v2/guide/components-slots.html

— ধন্যবাদ

স্টাইল গাইড বলেছেন যে প্রপ নামগুলি যথাসম্ভব বিস্তারিত হওয়া উচিত। এইভাবে নিয়ম ভঙ্গ করে। এটিও আমি ব্যবহার করি তবে আমি আরও ভাল সমাধান খুঁজছি।

— Koray Küpe 15

Answer 2

আপনি গণিত সম্পত্তি ছাড়াও করতে পারেন এবং অবজেক্টটি ইনলাইন করতে পারেন।

<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

ভি-বাইন্ডে ডক্সে প্রদর্শিত হয়েছে - https://vuejs.org/v2/api/#v-bind

Answer 3

আপনি এটি যেমন তৈরি করতে পারে ...

comp: { component: 'ComponentName', props: { square: true, outlined: true, dense: true }, model: 'form.bar' }
     

<component :is="comp.component" v-bind="{...comp.props}" v-model="comp.model"/>

Answer 4

আপনি যদি প্রয়োজনের মাধ্যমে আপনার কোডটি আমদানি করেন

var patientDetailsEdit = require('../patient-profile/patient-profile-personal-details-edit')

এবং নীচের হিসাবে ডেটা উদাহরণ সূচনা

data: function () {
            return {
                currentView: patientDetailsEdit,
            }

আপনি যদি উপাদানটি নির্ধারিত করে থাকেন তবে আপনি নামের বৈশিষ্ট্যের মাধ্যমেও উপাদানটি উল্লেখ করতে পারেন

currentProperties: function() {
                if (this.currentView.name === 'Personal-Details-Edit') {
                    return { mode: 'create' }
                }
            }