vue実装は必要に応じてコンポーネントと非同期コンポーネントの機能をロードします。
2795 ワード
実を言うと、最初はコンポーネントをロードするということが分かりませんでしたが、コンポーネントは必要に応じてロードできますか?後で分かりました
勉強が終わらないです。大丈夫です。私のを見てください。
必要に応じてコンポーネントをロードします。または非同期コンポーネントは主にcomponentのis属性を適用します。
templateのコード:
ここのボタンごとに、異なるコンポーネントを表示しますので、同じ方法名を使わせました。
ここのコンポーネントはrequestを使って必要に応じて導入します。私が使っているクリックイベントは、イベントがトリガされると、対応するコンポーネントを導入します。
まずdataでコンポーネントの属性を宣言します。
ここのコンポーネントは一つの方法として、コンポーネント名は方法名で、コンポーネント内容は方法体で、いくつかのコンポーネントがいくつかの方法を書きます。
以上は小编が皆さんに绍介した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実现です。必要に応じてコンポーネントと非同期コンポーネントの机能をロードして、皆さんに助けてほしいです。ここでも私たちのサイトを応援してくれてありがとうございます。