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

我大致遵循以下步骤使组件可拖动：

然后在我的

Calculator.vue

组件中，我有：

+
-
&时代；
&划分；
7.
8.
9
4.
5.
6.
1.
2.
3.
0
.
自动控制
=

这两个组件以不同的方式使用

slot

，在

draggable maker

中作为标记，在计算器中作为属性。但是，由于使用了

插槽

s，这与Vue 3不兼容。下面是我得到的错误：

---

有人能建议我如何修复此问题吗？

已弃用

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>

+
-
&时代；
&划分；
7.
8.
9
4.
5.
6.
1.
2.
3.
0
.
自动控制
=

---

不要忘了从

input

元素中删除

slot=“dragger”

，您使用的语法在2.6.0版中已被弃用，该版本将包括v3

，

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>

+
-
&时代；
&划分；
7.
8.
9
4.
5.
6.
1.
2.
3.
0
.
自动控制
=

---

别忘了从

input

元素中删除

slot=“dragger”

，您使用的语法在2.6.0版本中已被弃用，该版本将包括v3

，看起来它已经工作了，谢谢！您是否也建议删除

之外的包装器（在我的问题片段中，但不是在您的回答中）？不，您不能。这是vue.js使用的组件包装器看起来很有效，谢谢！您是否也建议删除

之外的包装器

（它在我的问题片段中，但不在您的回答中）？不，您不能。它是vue.js使用的组件包装器