vue 父子组件的拆分

父组件：

< template >

< div class = "app-container" >

< div class = "filter-container" >

< div style = "float:left;" >

< el-form >

< el-row :gutter = " 24 " >

< el-col :span = " 8 " >

< el-form-item >

< el-select v-model = " queryLocationListParam.addressId " placeholder = "商圈名称" clearable class = "filter-item" >

< el-option v-for = " item in addressSelectOptions " :key = " item.addressId " :label = " item.addressName " :value = " item.addressId " />

</ el-select >

</ el-form-item >

</ el-col >

< el-col :span = " 8 " >

< el-form-item >

< el-input v-model = " queryLocationListParam.positionName " placeholder = "请输入位置名称" clearable @keyup.enter.native = " handleFilter " ></ el-input >

</ el-form-item >

</ el-col >

< el-col :span = " 8 " >

< el-form-item >

< el-button size = "medium" class = "filter-item" type = "primary" icon = "el-icon-search" @click = " searchLocationData " > 查询 </ el-button >

</ el-form-item >

</ el-col >

</ el-row >

</ el-form >

</ div >

<!-- 批量添加 -->

< div style = "float:right;" >

< el-form >

< el-form-item >

< el-button class = "filter-item" style = "margin-left:20px;" type = "primary" icon = "el-icon-plus" @click = " batchAddLocation " > 批量新增点位 </ el-button >

</ el-form-item >

</ el-form >

</ div >

</ div >

<!-- table列表 用来放置初始化数据 -->

< el-table :data = " locationListData " border style = "width: 100%;margin-bottom:15px;" >

< el-table-column label = "点位序号" align = "center" rop = "positionId" >

< template slot-scope = "scope" >

< span v-text = " getIndex(scope.$index) " > </ span >

</ template >

</ el-table-column >

< el-table-column label = "是否再用" prop = "positionIsUse" :formatter = " isUseformatter " ></ el-table-column >

< el-table-column label = "创建时间" prop = "createDate" ></ el-table-column >

< el-table-column align = "center" label = "操作" >

< template slot-scope = "scope" >

<!-- scope.row 指的是表格中一行的数据 -->

< el-button type = "primary" icon = "edit" @click = " amendLocation(scope.row) " > 编辑 </ el-button >

< el-button type = "danger" icon = "delete" @click = " onDeleteLocation(scope.row) " > 删除 </ el-button >

</ template >

</ el-table-column >

</ el-table >

<!-- 分页 -->

< el-pagination @size-change = " handleSizeChange " @current-change = " handleCurrentChange "

:current-page = " queryLocationListParam.pageNum " :page-size = " queryLocationListParam.pageSize " :total = " totalCount "

:page-sizes = " [ 10 , 20 , 50 , 100 ] " layout = "total, sizes, prev, pager, next, jumper" >

</ el-pagination >

< location-list @cancelDialog = " hideLocationListDialog " :locationListDialogVisible = " locationListVisible " :onQueryLocationList = " doQueryLocationList " >

</ location-list >

< location-amend @cancelDialog = " hideAmendLocationDialog " :amendLocationDialogVisible = " amendLocationVisible " :onQueryAmendLocation = " doQueryAmendLocation " :locationId = " locationUpdateId " >

</ location-amend >

</ div >

</ template >

< script >

//在父组件中引入子组件

import locationList from "./batchAddLocationDialog" ;

import locationAmend from "./amendLocationDialog" ;

export default {

components: {

"location-list" : locationList, //定义一个location-list的新组建

"location-amend" : locationAmend //定义一个location-list的新组建

},

data() {

return {

//批量添加

locationListVisible: false ,

doQueryLocationList: false ,

//编辑

amendLocationVisible: false ,

doQueryAmendLocation: false ,

locationListData: [],

locationUpdateId: "" ,

};

},

created() { },

methods: {

//批量添加

batchAddLocation() {

this .locationListVisible = true ;

this .doQueryLocationList = true ;

},

hideLocationListDialog() {

this .locationListVisible = false ;

},

//编辑

amendLocation(row) {

this .amendLocationVisible = true ;

this .doQueryAmendLocation = true ;

this .locationUpdateId = row.positionId;

},

hideAmendLocationDialog() {

this .amendLocationVisible = false ;

},

getIndex($index) {

//表格序号

return ( this .queryLocationListParam.pageNum - 1 ) * this .queryLocationListParam.pageSize + $index + 1

},

//位置是否启用类型

isUseformatter(row, column) {

if (row.positionIsUse === "1" ) {

return " 是" ;

} else if (row.positionIsUse === "0" ) {

return " 否" ;

} else {

return row.positionIsUse;

}

},

//删除位置数据

onDeleteLocation(row) {

this .deleteLocationId.positionId = row.positionId;

this .$confirm( "确定删除此点位?" , "提示" , {

confirmButtonText: "确定" ,

showCancelButton: false ,

type: "warning"

}).then(() => {

deleteLocationInfo( this .deleteLocationId).then(() => {

this .queryLocationListData();

this .$notify({

title: "成功" ,

message: "删除商圈信息成功" ,

type: "success" ,

duration: 2000

});

});

});

}

}

};

</ script >

< style scoped >

.map-maintain {

margin : 0 ;

padding : 0 ;

}

.container {

margin-top : 10px ;

}

</ style >

批量添加子组件：

< template >

<!-- 批量添加位置对话框 -->

< el-dialog title = "添加" :visible.sync = " dialogVisible " @close = " batchAddLocationForm " >

</ el-dialog >

</ template >

< script >

import Vue from "vue" ;

export default {

name: "location-list" ,

props: {

//props用来接收父组件传给子组件的数据

locationListDialogVisible: Boolean,

onQueryLocationList: Boolean

},

data() {

return {

dialogVisible: false ,

};

},

created() {

},

methods: {

batchAddLocationForm() {

this .$emit( "cancelDialog" );

},

//取消对话框

cancelDialog() {

//点击取消按钮，关闭对话框，清除表单验证

this .$emit( "cancelDialog" );

},

},

computed: {},

watch: {

// 如果 `onQueryModuleList` 发生改变，这个函数就会运行

// onQueryModuleList: function(newValue, oldValue) {},

//当moduleListDialogVisible发生变化的时候，就要执行这个函数，

locationListDialogVisible: function (newValue, oldValue) {

//其中newvalue为当前的值，oldValue是变化后的值

this .dialogVisible = newValue;

}

}

};

</ script >

< style scoped >

</ style >

修改已组建

< template >

<!-- 批量添加位置对话框 -->

< el-dialog title = "添加" :visible.sync = " dialogVisible " @close = " amendLocationForm " >

</ el-dialog >

</ template >

< script >

export default {

name: "location-amend" ,

props: {

//props用来接收父组件传给子组件的数据

amendLocationDialogVisible: Boolean,

onQueryAmendLocation: Boolean,

locationId: String

},

data() {

return {

dialogVisible: false ,

};

},

created() { },

methods: {

amendLocationForm() {

this .$emit( "cancelDialog" );

},

cancelDialog() {

//点击取消按钮，关闭对话框，清除表单验证

this .$emit( "cancelDialog" );

},

//根据id查询位置接口

querylocationInformation() {

let param = { positionId: this .locationId };// 请注意this.locationId的引用

queryLocationInforById(param).then(data => {

let res = data.data;

this .queryLocationParam = res;

this .$notify({

title: "成功" ,

message: "查询位置信息成功" ,

type: "success" ,

duration: 2000

});

});

},

// 根据id修改位置接口

saveLocation() {

this .amendLocationDialogVisible = false ;

modifyLocationInforById( this .queryLocationParam).then(data => {

let res = data.data;

this .queryLocationParam = res;

this .dialogVisible = false ;

this .$notify({

title: "成功" ,

message: "查询位置信息成功" ,

type: "success" ,

duration: 2000

});

});

}

},

computed: {},

watch: {

// 如果 `onQueryModuleList` 发生改变，这个函数就会运行

// onQueryModuleList: function(newValue, oldValue) {},

//当moduleListDialogVisible发生变化的时候，就要执行这个函数，

amendLocationDialogVisible: function (newValue, oldValue) {

//其中newvalue为当前的值，oldValue是变化后的值

this .dialogVisible = newValue;

},

locationId: function (newValue, oldValue) {//注意这里

this .querylocationInformation(newValue);

}

}

};

</ script >

< style scoped >

</ style >

 

转载于:https://my.oschina.net/u/4013226/blog/2874886