1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。
现在要实现这样一个需求，在子组件中点击删除调用父组件的方法进行删除且🔗连接接口，并且父组件中的方法需要传入子组件的数据。整体思路如下：首先实现父子组件的通信挂钩，然后实现本地的删除逻辑，最后连接接口测试 文件结构如下： 看代码实现部分
子组件 listCard.vue注意data要进行定义声明，否则父组件取不到 下面是页面完整代码
<template> <div class="record-card"> <div class="record-info"> <div class="record-info-line1">{{contentInfo.name}}</div> <div class="record-info-line2"> //注意：从后端拿到的数据gender1为女，0为男，用三目表达式进行转换 <span class="record-gender text">{{contentInfo.gender>0?'女':'男'}}</span> <span class="record-age text">{{contentInfo.age}}</span> <span class="record-height text">身高{{contentInfo.height}}cm</span> <span class="record-weight text">体重{{contentInfo.weight}}kg</span> <span class="record-edit txt">编辑</span> <span class="record-delect txt" @click="delectObj">删除</span> </div> </div> </div> </template> <script> export default { //获取接口数据 props: { contentInfo: { type: Object, }, }, methods: { delectObj() { let data = { id: this.contentInfo.id }; this.$emit('delList',data) }, }, }; </script> <style lang="less" scoped> @import './index.less'; </style> 父组件 list.vue 监听子组件的delList事件 触发子组件删除事件，根据id用splice方法进行删除 下面是页面完整代码： <template> <div class="activity-card-group"> <ListView v-if="list&&list.length>0" :isEnd="isEnd" //在页面底部 :infinite="true" //分页 :onInfinite="onInfinite" //分页方法 :lazyload="true" //懒加载 :explode="true" //曝光 > // <ListCard @delList="delList" :key="index" :contentInfo="item" v-for="(item, index) in list"></ListCard> </ListView> <Empty v-if="inited && !(list&&list.length>0)" :showHome="true" /> </div> </template> <script> import ListView from '@/components/listView'; import ListCard from '../listCard'; import Empty from '../../../components/empty'; //预留接口 PatientList,delPatient import { PatientList, delPatient } from '@/services/qa/HealthRecords'; export default { components: { ListCard, ListView, Empty, }, data() { return { list: [], isEnd: false, inited: false, isLoading: false, pageNo: 1, id: 0 }; }, created() { this.initList(); }, methods: { //初始化页面 initList() { this.pageNo = 1; this.getList() .then((list) => { this.inited = true; //初始化成功 this.list = list; }) .catch((e) => { this.inited = true; console.log(e); }); }, delList(data) { console.log('删除?', data); return delPatient({ encUserId : this.encUserId, id : data.id }) .then((res = {}) => { //成功则执行 this.list.splice(this.index, 1); return res.list; }) .catch((e) => { throw new Error(e); //不成功则抛出一个错误 }); }, // 分页 onInfinite(done) { if (this.isEnd || !this.inited) { return; } this.pageNo += 1; this.getList() .then((list = []) => { this.list = this.list.concat(list); done(); }) .catch((e) => { console.log(e); done(); }); }, getList() { if (this.isLoading) { return Promise.reject(); //返回一个拒绝状态的promise对象 } //加载成功 this.isLoading = true; return PatientList({ pageNo: this.pageNo, }) .then((res = {}) => { this.isLoading = false; this.isEnd = !res.hasNextPage; //接口不再获取数据 return res.list; }) .catch((e) => { this.isEnd = true; this.isLoading = false; throw new Error(e); }); }, }, }; </script> <style lang="less" scoped> @import './index.less'; </style>