父組件傳值給子組件：props
父組件代碼：
// 父組件通過雙向綁定定義數據值’ :tableDatas ’ <LampAdmin :tableDatas="tableData"></LampAdmin>
子組件代碼：
// 2、然后子組件就可以直接在頁面中使用，比如： {{tableDatas}} <ul> <li v-for=“(item, index) in tableDatas”> <span>{{item.name}}</span> ... </li> </ul> export default { // 1、先通過props接受父組件傳過來的數據值 tableDatas props: { tableDatas: { type: Array } }, data() { return { dialogFormVisible: false, }
},
子組件改變父組件值的變化： $emit (PS：還可以使用$parent，這個等我使用了之后在做記錄了)
子組件代碼：
// 定義刪除方法 handleDelete() <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)"></el-button>
// 編寫刪除方法
handleDelete(row) {
let _id = row.id
this.$confirm('是否要刪除 <b style="color:red">' + row.name + '</b> ?', '提示', {
dangerouslyUseHTMLString: true,
showCancelButton: false,
confirmButtonText: '確定',
type: 'warning',
center: true
}).then(() => {
this.$axios.post('/api/LampPole/DelLampTypeTypeInfo', { data: { id: _id } }
).then((res) => {
this.$message.success(res.data.msg)
// 通過this.$emit屬性傳自定義的屬性和值給父組件
this.$emit("refresh-item", res.data.code)
}).catch((err) => {
this.$message.error(err)
})
}).catch(e => e);
}
父組件代碼：
// 通過 v-bind定義子組件傳過來的自定義屬性，同時添加方法 refreshList <LampType :tableDatas="tableData" @refresh-item="refreshList"></LampType> // 然后編寫refreshList方法 // 刷新列表數據 refreshList(item){ // item是子組件傳過來的值 if(item == 200){ this.getListDate(this.pageSize, this.currentPage,this.activeName) } },
應用場景表格的刪除，編輯，添加
ok，這樣就可以成功實現子組件刪除之后刷新父組件上面的數據，使子組件跟着更新！