有没有比较熟悉Vue3的, 麻烦帮忙看下这个需求怎么实现?

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

我把问题简化了一下. 设计一个 vue 组件, 模板如这:

<template>
    <div>
        <slot></slot>
    </div>
</template>
<script setup>
const childRef = ref();
</script>

要对于图单: 无论形居中呢？件的默认插槽中提供什么内容, childRef.value 始终指向插槽内的渲染的第一个元素实例或者为 null. 要求所有逻辑都实现在该组件内部

同样的问题我咨询过 ChatGPT4, 给出的方案是用 MutationOberserver 实现. 感觉确实能做, 但略牵强... 不知道有没有更优雅一点的解决方案?

回答：

vue 中应该没有现成的方案直接绑定第一个子元素，但是有个思路：

  1. 用 watch 或 watchEffect 监听 $slots.default 的变化
  2. 在变化后将 $slots.default 中的第一个元素赋值到 childRef.value 中；

回答：

我觉得 GPT4 的答案还蛮好的。Vue3 支持组件内多根节点，你不走 DDM 反而容易出错。

不过既然你包了一层 <div>，如果是我的话，我就直接把 ref 加在上面，然后用 children 之类的来操作就好。

以上是 有没有比较熟悉Vue3的, 麻烦帮忙看下这个需求怎么实现? 的全部内容， 来源链接： utcz.com/p/935206.html

回到顶部