SoFunction
Updated on 2025-03-04

vue realizes the functions of loading components on demand and asynchronous components

To be honest, I didn't know what it means to load components on demand at the beginning, and components can also load on demand??? Later I found out

Can't finish learning...it's okay, look at me

Loading components on demand or asynchronous components mainly applies the component's is attribute

Code in template:

Each button here has to display different components, so I asked them to use the same method name

 <template slot-scope="scope">
    <el-button
    type="text"
    size="mini"
    @click="handleSchedule('CustomerInfoSchedule', .customer_id)"
    >Details</el-button>
    <el-button
    type="text"
    size="mini"
    @click="handleSchedule('VisitRecordSchedule', .customer_id)"
    >Return visit</el-button>
    <el-button
    type="text"
    size="mini"
    @click="handleSchedule('AddCustomerSchedule',.customer_id)"
    >edit</el-button>
    <el-button
    type="text"
    size="mini"
    @click="handleSchedule('AddPeopleSchedule', .customer_id)"
    >Add a contact</el-button>
   </template>

 <component 
 :is="currentComponent" 
 :customer_ 
 @componentResult="componentResult"
 >
 </component>

Code in script:

The components here are introduced on demand using request. I use the click event. When the event is triggered, the corresponding components are introduced.

First declare the properties of the component in data

 data() {
 return {
  currentComponent: "",
  customer_id:'',
 }
 }

Then register the component

The components here are methods. The component name is the method name and the component content is the method body. If there are several components, write several methods.

components: {
  AddCustomerSchedule(resolve) {
  require(["../components/AddCustomer"], resolve);
  },
  AddPeopleSchedule(resolve) {
  require(["../components/AddPeople"], resolve);
  },
  CustomerInfoSchedule(resolve) {
  require(["../components/CustomerInfo"], resolve);
  },
  VisitRecordSchedule(resolve) {
  require(["../components/VisitRecord"], resolve);
  },
 },

Methods defined

// Here you directly receive the name, then introduce the corresponding components and pass the value at the same time handleSchedule(name, id) {
  this.customer_id = id;
   = name;
  },
 // This is the method of the child component triggering the parent component to return, because my components are pop-up boxes // So when the child component closes the pop-up box, I let it be empty // At the same time, you can selectively refresh the data  componentResult(type) {
  if (type == "upData") {
   ();
  } else {
    = "";
  }
  },

Summarize

The above is the function of Vue loading components and asynchronous components introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!