Explanation of vue components Dynamic Components

2021-12-04 18:06:35
OfStack

Catalogue summary

When the array changes, the corresponding data is dynamically loaded

Scenario: Click different component names, and the interface will display the corresponding components

Step 1: Import the required components

Step 2: Click the tab tab to add the corresponding component name to the array

Step 3: Bind the component name using the dynamic component,: is attribute


<div v-for="(item, index) in componentData" :key="index">
  <components :is="item.componentName"/>
</div>

Case: Listening for attribute changes in objects, deep monitoring


<!-- DynamicComponent.vue -->
<template>
  <section>
    <div v-for="(item, index) in componentData" :key="index">
      <components :is='item.componentName' :params="item.content" />
    </div>
  </section>
</template>
<script>
import PageOne from './pageComponents/PageOne'
import PageTwo from './pageComponents/PageTwo'
import PageThree from './pageComponents/PageThree'
export default{
  name: 'DynamicComponent',
  components: {
    PageOne,
    PageTwo,
    PageThree
  },
  data () {
    return {
      componentData: [
        {
          componentName: 'PageOne',
          content: {
            title: ' Title 1'
          }
        },
        {
          componentName: 'PageTwo',
          content: {
            title: ' Title 2'
          }
        }
      ]
    }
  }
}
</script>


<!-- PageOne -->
<template>
  <section>
    {{content}}
  </section>
</template>
<script>
export default{
  name: 'PageOne',
  props: {
    params: {
      type: Object,
      default: function(){
        return {}
      }
    }
  },
  data () {
    return {
      content: this.params.title
    }
  },
  watch: {
    params: {
      handler(newVal, oldVal){
        this.content = newVal.title
      },
      deep: true,
      immediate: true
    }
  }
}
</script>


<!-- PageTwo -->
<template>
  <section>
    {{content}}
  </section>
</template>
<script>
export default{
  name: 'PageTwo',
  props: {
    params: {
      type: Object,
      default: function(){
        return {}
      }
    }
  },
  data () {
    return {
      content: this.params.title
    }
  },
  watch: {
    params: {
      handler(newVal, oldVal){
        this.content = newVal.title
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

Summarize

This article is here, I hope to give you help, but also hope that you can pay more attention to this site more content!