슬롯을 Vue 2에서 Vue 3으로 마이그레이션

슬롯을 Vue 2에서 Vue 3으로 마이그레이션

구성 요소를 끌 수 있게 만들기 위해 대략 이 기사를 따라갔다.

<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태그로, 계산기로서 속성으로.단, 이것은 Vue 3의 사용으로 인해 호환이 되지 않는다.slots. 여기 내가 받는 오류:

이 문제를 어떻게 해결할 수 있을지 누가 제안해 주시겠습니까?

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

빼는 것을 잊지 마라slot="dragger" 로부터input요소, 사용하는 구문은 v3을 포함하는 버전 2.6.0에서 더 이상 사용되지 않음

참조URL: https://stackoverflow.com/questions/63749380/migrating-slots-from-vue-2-to-vue-3