标签：jeecgboot export vue3 组件 属性 id currentRowId 加载

需求

同
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,export,vue3,组件,属性,id,currentRowId,加载
来源： https://www.cnblogs.com/mahongbiao/p/16324287.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。