在頁面很複雜的時候，我們可以進行頁面組件的抽離，簡化頁面的複雜度。具體實例如下：
第1步：新建子組件src/compinents/shop/create/base-create.vue
<template>
<el-form ref="form" label-width="80px">
<el-form-item label="商品名稱">
<el-input :value="title" @input="vModel('title',$event)" placeholder="請輸入商品名稱，不能超過60個字符" class="w-50"></el-input>
</el-form-item>
<el-form-item label="商品分類">
<el-cascader :value="category" @input="vModel('category',$event)" :options="options"></el-cascader>
</el-form-item>
<el-form-item label="商品描述">
<el-input type="textarea" :value="desc" @input="vModel('desc',$event)"
placeholder="選填，商品賣點簡述，例如：此款商品美觀大方 性價比較高 不容錯過" class="w-50"></el-input>
</el-form-item>
<el-form-item label="商品單位">
<el-input :value="unit" @input="vModel('unit',$event)" placeholder="請輸入商品單位" class="w-50"></el-input>
</el-form-item>
<el-form-item label="總庫存">
<el-input type="number" :value="stock" @input="vModel('stock',$event)" class="w-25">
<template slot="append">件</template>
</el-input>
</el-form-item>
<el-form-item label="庫存預警">
<el-input type="number" :value="min_stock" @input="vModel('min_stock',$event)" class="w-25">
<template slot="append">件</template>
</el-input>
</el-form-item>
<el-form-item label="庫存顯示">
<el-radio-group :value="display_stock" @input="vModel('display_stock',$event)">
<el-radio :label="1" border>是</el-radio>
<el-radio :label="0" border>否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="是否上架">
<el-radio-group :value="status" @input="vModel('status',$event)">
<el-radio :label="0" border>放入倉庫</el-radio>
<el-radio :label="1" border>立即上架</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="運費模板">
<el-select :value="express" @input="vModel('express',$event)" placeholder="請選擇運費模板">
<el-option label="區域一" value="shanghai"></el-option>
<el-option label="區域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
data() {
return {
tabIndex: 0,
options: [
{
value: "zhinan",
label: "指南",
children: [
{
value: "shejiyuanze",
label: "設計原則",
children: [
{
value: "yizhi",
label: "一致"
},
{
value: "fankui",
label: "反饋"
},
{
value: "xiaolv",
label: "效率"
},
{
value: "kekong",
label: "可控"
}
]
},
{
value: "daohang",
label: "導航",
children: [
{
value: "cexiangdaohang",
label: "側向導航"
},
{
value: "dingbudaohang",
label: "頂部導航"
}
]
}
]
},
{
value: "zujian",
label: "組件",
children: [
{
value: "basic",
label: "Basic",
children: [
{
value: "layout",
label: "Layout 佈局"
},
{
value: "color",
label: "Color 色彩"
},
{
value: "typography",
label: "Typography 字體"
},
{
value: "icon",
label: "Icon 圖標"
},
{
value: "button",
label: "Button 按鈕"
}
]
},
{
value: "form",
label: "Form",
children: [
{
value: "radio",
label: "Radio 單選框"
},
{
value: "checkbox",
label: "Checkbox 多選框"
},
{
value: "input",
label: "Input 輸入框"
},
{
value: "input-number",
label: "InputNumber 計數器"
},
{
value: "select",
label: "Select 選擇器"
},
{
value: "cascader",
label: "Cascader 級聯選擇器"
},
{
value: "switch",
label: "Switch 開關"
},
{
value: "slider",
label: "Slider 滑塊"
},
{
value: "time-picker",
label: "TimePicker 時間選擇器"
},
{
value: "date-picker",
label: "DatePicker 日期選擇器"
},
{
value: "datetime-picker",
label: "DateTimePicker 日期時間選擇器"
},
{
value: "upload",
label: "Upload 上傳"
},
{
value: "rate",
label: "Rate 評分"
},
{
value: "form",
label: "Form 表單"
}
]
},
{
value: "data",
label: "Data",
children: [
{
value: "table",
label: "Table 表格"
},
{
value: "tag",
label: "Tag 標籤"
},
{
value: "progress",
label: "Progress 進度條"
},
{
value: "tree",
label: "Tree 樹形控件"
},
{
value: "pagination",
label: "Pagination 分頁"
},
{
value: "badge",
label: "Badge 標記"
}
]
},
{
value: "notice",
label: "Notice",
children: [
{
value: "alert",
label: "Alert 警告"
},
{
value: "loading",
label: "Loading 加載"
},
{
value: "message",
label: "Message 消息提示"
},
{
value: "message-box",
label: "MessageBox 彈框"
},
{
value: "notification",
label: "Notification 通知"
}
]
},
{
value: "navigation",
label: "Navigation",
children: [
{
value: "menu",
label: "NavMenu 導航菜單"
},
{
value: "tabs",
label: "Tabs 標籤頁"
},
{
value: "breadcrumb",
label: "Breadcrumb 麪包屑"
},
{
value: "dropdown",
label: "Dropdown 下拉菜單"
},
{
value: "steps",
label: "Steps 步驟條"
}
]
},
{
value: "others",
label: "Others",
children: [
{
value: "dialog",
label: "Dialog 對話框"
},
{
value: "tooltip",
label: "Tooltip 文字提示"
},
{
value: "popover",
label: "Popover 彈出框"
},
{
value: "card",
label: "Card 卡片"
},
{
value: "carousel",
label: "Carousel 走馬燈"
},
{
value: "collapse",
label: "Collapse 摺疊面板"
}
]
}
]
},
{
value: "ziyuan",
label: "資源",
children: [
{
value: "axure",
label: "Axure Components"
},
{
value: "sketch",
label: "Sketch Templates"
},
{
value: "jiaohu",
label: "組件交互文檔"
}
]
}
]
};
},
computed: {
...mapState({
title: state => state.goods_create.title,
category: state => state.goods_create.category,
desc: state => state.goods_create.desc,
unit: state => state.goods_create.unit,
stock: state => state.goods_create.stock,
min_stock: state => state.goods_create.min_stock,
display_stock: state => state.goods_create.display_stock,
status: state => state.goods_create.status,
express: state => state.goods_create.express
})
},
methods: {
...mapMutations(["vModelState"]),
// 修改表單的值
vModel(key, value) {
this.vModelState({ key, value });
}
}
};
</script>
<style >
</style>
注意：我們需要將對應的該組件的data、methods、computed都要抽離出來，但是我們不需要考慮怎麼傳值，方法如何調用等等。
第2步：在父組件中引入子組件base-create.vue與vuex，刪除已經抽離出來的data、methods、computed等等
<base-create></base-create>
import { mapState, mapMutations } from "vuex";
import baseCreate from "@/components/shop/create/base-create";