• 欢迎光临~

jeecgboot-vue3笔记(六)主子组件数据加载

开发技术 开发技术 2022-05-29 次浏览

需求


jeecgboot-vue3笔记(二)主子组件数据加载 https://www.cnblogs.com/mahongbiao/p/16303590.html
实现父组件切换记录行,加载该行相关的子组件记录,除了子组件export出loadData并由父组件通过ref调用外,还可以通过子组件export出prop(prop就是给外边调用的,因此不需要指明export)并watch以加载数据。

实现思路

  • 设置行切换点击时勾选行
    clickSelectRow
  • 响应行勾选事件
    @selectRowChange="handleSelectRowChange"
  • 过滤掉全选操作
    if(event.action == "selected-all")return;//勾选全部时row为undefined
  • 设置操作(选中或去选无所谓)行的id
    currentRowId = event.row.id;//当前选中行ID

子组件监听属性值

  • 子组件定义属性
    const props = defineProps({ pid: String });
  • 子组件监听属性值变化,并调用loadData等方法
    watch(pid) =>(){ loadData(); }
  • 父组件定义当前行ID以用于绑定子组件属性
    const currentRowId = ref();
  • template引入子组件,绑定currentRowId到子组件属性
  • 父组件在目标处(例如行切换事件响应处)更改绑定给子组件属性的值currentRowId
    currentRowId = event.row.id;//当前选中行ID
程序员灯塔
转载请注明原文链接:jeecgboot-vue3笔记(六)主子组件数据加载
喜欢 (0)