vue3同一页面内重复引用同一操作dom的组件产生的问题

2023年8月28日12:39:40

vue3同一页面内标签<component>重复引用同一组件，且该组件内使用css选择器进行dom操作导致页面内相同组件发生变化的问题解决记录

组件内进行dom操作，需要通过js方法进行选择器的元素获取，但当vue3全部渲染完毕后，页面内有多个id为test9的相同元素，元素选择将变得模糊，如下：

document.querySelectorAll('#test9 table tbody')[0]

解决办法是把上面的js方式改成ref进行引用，并在异步加载该组件时进行markRaw，标记组件为非响应式，提高渲染性能

// 组件内
<template>
  ......
  <tbody ref="tbody">
    ...
  </tbody>
</template>

<script>
  // 用 tbody.value去做dom操作
  const tbody = ref<any>(null)
</script>

// 多次引用该组件的父级页面
<template>
  ......
  // v-for循环
  <component
    :is="getComponent('组件名')"
    class="grow"
  />
</template>

<script>
function getComponent(name: string): Component {
  return markRaw(defineAsyncComponent(import.meta.glob('src/component/*.vue')[`src/component/${name}.vue`]))
}
</script>

总结：个人认为ref类似组件的data，是相互隔离独立的