Миграция "слот" устарел синтаксис

Question

Я использую vue.js 2.6.1 текущий код (написанный коллегой, которого больше нет)

Он использовал директиву scope со следующим устаревшим синтаксисом

<template slot="HEAD[epc]" slot-scope="data">
            <div>
              <p class="column-title">{{data.label}}</p>
              <p class="explanation-text">{{data.field.explanation}}</p>
            </div>
</template>

Я хочу получить доступ к объекту «data» в области слота, но хочу перенести старый синтаксис на новый, в документации не объясняется, как.

также я попытался изменить область= "head [epc]" в v-slot, и консоль предупреждает меня о смешанном синтаксисе.

Любая помощь будет приветствоваться.Благодаря.

Answer 1

Я могу только догадываться, что HEAD[epc] - это буквальное имя слота в вашем дочернем компоненте, например,

<slot name="HEAD[epc]" :label="label" :field="field"></slot>

Чтобы использовать это, вам нужно будет создать data или computedсвойство для его представления и использования синтаксиса динамического имени слота .Например, в вашем родительском компоненте

<template v-slot:[slotname]="data">

data: () => ({
  slotname: 'HEAD[epc]'
})

Vue.component('Test', {
  data: () => ({
    label: 'Label',
    field: {
      explanation: 'Explanation'
    }
  }),
  template: `<div>
  <h1>Test</h1>
  <slot name="HEAD[epc]" :label="label" :field="field"></slot>
  </div>`
})

new Vue({
  el: "#app",
  data: () => ({
    slotname: 'HEAD[epc]'
  })
})

.column-title {
  font-weight: bold;
}

.explanation-text {
  color: blue;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="app">
  <test>
    <template v-slot:[slotname]="data">
    <div>
      <p class="column-title">{{data.label}}</p>
      <p class="explanation-text">{{data.field.explanation}}</p>
    </div>
  </template>
  </test>
</div>