在Vue中父子组件之间的数据传输和子组件中删除操作之后更新父组件刷新当前列表数据

父组件传值给子组件：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，这样就可以成功实现子组件删除之后刷新父组件上面的数据，使子组件跟着更新！