vue.js - 将插槽从 Vue 2 迁移到 Vue 3

Question

我大致按照这篇文章做了一个组件可拖动：

<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作为标签中，在计算器中作为属性。但是，由于使用了 s.vue ，这与 Vue 3 不兼容slot。这是我得到的错误：

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

Answer 1

该slot属性已被弃用，并由v-slot:slotnamefor named slots 替换，您应该按如下方式使用它：

  <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>

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