Passing props dynamically to dynamic component in VueJS

后端 未结 5 1380
南笙
南笙 2020-12-02 05:44

I\'ve a dynamic view:

with an associated Vue ins

相关标签:
5条回答
  • 2020-12-02 06:07

    I have the same challenge, fixed by the following:

    <component :is="currentComponent" v-bind="resetProps"> 
       {{ title }}
    </component>
    

    and the script is

    export default { 
      …
      props:['title'],
      data() {
        return {
          currentComponent: 'component-name',
        }
      },
      computed: {
        resetProps() {
          return { ...this.$attrs };
        },
    }
    
    <div
        :color="'error'"
        :onClick="handleOnclick"
        :title="'Title'"
    />
    

    I'm came from reactjs and I found this solve my issue

    0 讨论(0)
  • 2020-12-02 06:21

    If you have imported you code through require

    var patientDetailsEdit = require('../patient-profile/patient-profile-personal-details-edit')
    and initalize the data instance as below

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

    you can also reference the component through the name property if you r component has it assigned

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

    0 讨论(0)
  • 2020-12-02 06:22

    You can also do without computed property and inline the object.

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

    Shown in the docs on V-Bind - https://vuejs.org/v2/api/#v-bind

    0 讨论(0)
  • 2020-12-02 06:25

    To pass props dynamically, you can add the v-bind directive to your dynamic component and pass an object containing your prop names and values:

    So your dynamic component would look like this:

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

    And in your Vue instance, currentProperties can change based on the current component:

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

    So now, when the currentComponent is myComponent, it will have a foo property equal to 'bar'. And when it isn't, no properties will be passed.

    0 讨论(0)
  • 2020-12-02 06:29

    You could build it like...

    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"/>

    0 讨论(0)
提交回复
热议问题