vue実装は必要に応じてコンポーネントと非同期コンポーネントの機能をロードします。


実を言うと、最初はコンポーネントをロードするということが分かりませんでしたが、コンポーネントは必要に応じてロードできますか?後で分かりました
勉強が終わらないです。大丈夫です。私のを見てください。
必要に応じてコンポーネントをロードします。または非同期コンポーネントは主にcomponentのis属性を適用します。
templateのコード:
ここのボタンごとに、異なるコンポーネントを表示しますので、同じ方法名を使わせました。

 <template slot-scope="scope">
    <el-button
    type="text"
    size="mini"
    @click="handleSchedule('CustomerInfoSchedule', scope.row.customer_id)"
    >  </el-button>
    <el-button
    type="text"
    size="mini"
    @click="handleSchedule('VisitRecordSchedule', scope.row.customer_id)"
    >  </el-button>
    <el-button
    type="text"
    size="mini"
    @click="handleSchedule('AddCustomerSchedule',scope.row.customer_id)"
    >  </el-button>
    <el-button
    type="text"
    size="mini"
    @click="handleSchedule('AddPeopleSchedule', scope.row.customer_id)"
    >     </el-button>
   </template>

 <component 
 :is="currentComponent" 
 :customer_id="customer_id" 
 @componentResult="componentResult"
 >
 </component>
スクリプトのコード:
ここのコンポーネントはrequestを使って必要に応じて導入します。私が使っているクリックイベントは、イベントがトリガされると、対応するコンポーネントを導入します。
まずdataでコンポーネントの属性を宣言します。

 data() {
 return {
  currentComponent: "",
  customer_id:'',
 }
 }
コンポーネントを登録します
ここのコンポーネントは一つの方法として、コンポーネント名は方法名で、コンポーネント内容は方法体で、いくつかのコンポーネントがいくつかの方法を書きます。

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);
  },
 },
定義された方法

//       name,          ,    
 handleSchedule(name, id) {
  this.customer_id = id;
  this.currentComponent = name;
  },
 //                  ,           
 //               ,  this.currentComponent  
 //             
  componentResult(type) {
  if (type == "upData") {
   this.getTableData();
  } else {
   this.currentComponent = "";
  }
  },
締め括りをつける
以上は小编が皆さんに绍介したvue実现です。必要に応じてコンポーネントと非同期コンポーネントの机能をロードして、皆さんに助けてほしいです。ここでも私たちのサイトを応援してくれてありがとうございます。