将插槽从 Vue 2 迁移到 Vue 3

Posted 2023-02-23

【中文标题】将插槽从 Vue 2 迁移到 Vue 3

【英文标题】：Migrating slots from Vue 2 to Vue 3

【发布时间】：2020-12-24 05:04:06

【问题描述】：

我大致按照this article做了一个组件可拖动：

<template>
  <div ref="draggableContainer" class="draggable-container">
    <div class="draggable-header" @mousedown="dragMouseDown">
      <slot name="dragger"></slot>
    </div>
    <slot></slot>
  </div>
</template>

然后在我的Calculator.vue 组件中我有：

<template>
  <Draggable class="calculator">
    <input type="text" class="calculator-screen" slot="dragger" value="" />

    <div class="calculator-keys">
      <button type="button" class="operator" value="+">+</button>
      <button type="button" class="operator" value="-">-</button>
      <button type="button" class="operator" value="*">&times;</button>
      <button type="button" class="operator" value="/">&divide;</button>

      <button type="button" value="7">7</button>
      <button type="button" value="8">8</button>
      <button type="button" value="9">9</button>

      <button type="button" value="4">4</button>
      <button type="button" value="5">5</button>
      <button type="button" value="6">6</button>

      <button type="button" value="1">1</button>
      <button type="button" value="2">2</button>
      <button type="button" value="3">3</button>

      <button type="button" value="0">0</button>
      <button type="button" class="decimal" value=".">.</button>
      <button type="button" class="all-clear" value="all-clear">AC</button>

      <button type="button" class="equal-sign operator" value="=">=</button>
    </div>
  </Draggable>
</template>

两个组件以不同的方式使用slot，在draggable-maker 中作为标签，在计算器中作为属性。但是，由于使用了slots，这与 Vue 3 不兼容。这是我得到的错误：

有人可以建议我如何解决这个问题吗？

【参考方案1】：

slot 属性已被弃用，它被命名插槽的v-slot:slotname 替换，您应该按如下方式使用它：

  <Draggable class="calculator">
   <template v-slot:dragger>

   <input type="text" class="calculator-screen" value="" />
    <div class="calculator-keys">
      <button type="button" class="operator" value="+">+</button>
      <button type="button" class="operator" value="-">-</button>
      <button type="button" class="operator" value="*">&times;</button>
      <button type="button" class="operator" value="/">&divide;</button>

      <button type="button" value="7">7</button>
      <button type="button" value="8">8</button>
      <button type="button" value="9">9</button>

      <button type="button" value="4">4</button>
      <button type="button" value="5">5</button>
      <button type="button" value="6">6</button>

      <button type="button" value="1">1</button>
      <button type="button" value="2">2</button>
      <button type="button" value="3">3</button>

      <button type="button" value="0">0</button>
      <button type="button" class="decimal" value=".">.</button>
      <button type="button" class="all-clear" value="all-clear">AC</button>

      <button type="button" class="equal-sign operator" value="=">=</button>
    </div>
</template>
  </Draggable>

不要忘记从 input 元素中删除 slot="dragger" ，您使用的语法在 2.6.0 版本中已弃用，其中将包含 v3

【讨论】：

看起来成功了，谢谢！您是否还建议删除<Draggable> 之外的包装器<template>（它在我的问题的sn-p 中，但不在您的回复中）？

不，你不可能是 vue.js 使用的组件包装器