Vue components dynamic components detailed explanation

Vue components dynamic components detailed explanation

When the array changes, dynamically load the corresponding data

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

Step 1 : Import required components

Step 2 : Click the tab and add the corresponding component name into the array

Step 3 : Use dynamic components and bind the :is attribute to the component name

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

Example : Monitoring property changes in an object, 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 ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!

When the array changes, dynamically load the corresponding data

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

Step 1 : Import required components

Step 2 : Click the tab and add the corresponding component name into the array

Step 3 : Use dynamic components and bind the :is attribute to the component name

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

Example : Monitoring property changes in an object, 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 ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:
  • Vue built-in component component--dynamically render component operations through the is attribute
  • Vue.component property description
  • Detailed explanation of the relationship between Vue and VueComponent
  • vue dynamic component
  • Solve the component tag rendering problem of Vue

<<:  Detailed explanation of MySQL EXPLAIN output columns

>>:  About Jenkins + Docker + ASP.NET Core automated deployment issues (avoid pitfalls)

Recommend

Complete steps for Docker to pull images

1. Docker pull pulls the image When using $ docke...

How to check the version of Kali Linux system

1. Check the kali linux system version Command: c...

CSS warped shadow implementation code

This article introduces the implementation code o...

Vue ElementUI Form form validation

Form validation is one of the most commonly used ...

How to deploy Redis 6.x cluster through Docker

System environment: Redis version: 6.0.8 Docker v...

SSM projects are frequently deployed as war packages, using tomcat and maven to implement hot deployment configuration

background As we all know, after we develop a Jav...

Instance method for mysql string concatenation and setting null value

#String concatenation concat(s1,s2); concatenate ...

Detailed explanation of Django+Vue+Docker to build an interface testing platform

1. Two words at the beginning Hello everyone, my ...

Example of integrating Kafka with Nginx

background nginx-kafka-module is a plug-in for ng...

Detailed explanation of custom configuration of docker official mysql image

In order to save installation time, I used the of...

Use vue3 to implement a human-cat communication applet

Table of contents Preface Initialize the project ...

Summary of several APIs or tips in HTML5 that cannot be missed

In previous blog posts, I have been focusing on so...

In-depth understanding of MySQL master-slave replication thread state transition

Preface The basic principle of MySQL master-slave...

CSS3 implements missing corner rectangle, folded corner rectangle and missing corner border

Preface A few days ago, I came across the feature...

MySQL 8.0 WITH query details

Table of contents Learning about WITH queries in ...