vue3多重父子组件通信更新问题，多个相同组件通信不对应？

  • Z时代
  • 2024-02-08
  • 分类：IT

首页

<div id="index1">
    <tools key="12" customRef="settingModal_12" :dataParam="{key: '1', name: 'index1'}" />
  </div>
  <div id="index2">
    <tools key="13" customRef="settingModal_13" :dataParam="{key: '2', name: 'index2'}" />
  </div>
  <div id="index3">
    <tools key="14" customRef="settingModal_14" :dataParam="{key: '3', name: 'index3'}" />
  </div>

tools组件页面

<a-button type="link" @click="setting.show(props.dataParam.name)">自定义{{props.dataParam.name}}</a-button>
<SettingsModal ref="settingModal" @updateUserToolsData="updateUserToolsData" />
const updateUserToolsData = (catId: string):void => {
    // 数据更新
}

**

我的问题是，对点击tools组件里的自定义弹窗进行修改，弹窗内可切换不同菜单进行数据修改，当弹窗内切换菜单后，修改的数据始终是显示到点击的那个菜单里去，对应菜单的内容并不更新，求大神指导！**

setting组件页面

// 左侧菜单切换
<a-menu>
 <a-menu-item v-for="subitem in menulist" :key="subitem.key" @click="menuClick(subitem)">
    {{ subitem.name }}
 </a-menu-item>
</a-menu>
<a-button type="orange" shape="round" ghost size="small" @click="delCard(item)">删除</a-button>
menulist = {
    {
      name: 'index1',
      key: '1',
    },
  {
    name: 'index2',
    key: '2',
  },
  {
      name: 'index3',
      key: '3',
    },
}
// 删除操作
const delCard = (data:object):void => {
     emits('updateUserToolsData', data.key);
}

以上是 vue3多重父子组件通信更新问题，多个相同组件通信不对应？ 的全部内容， 来源链接： utcz.com/p/932788.html

回到顶部