vue.js - 迁移“插槽”不推荐使用的语法

Question

我在 vue.js 2.6.1 上运行当前代码（由不在身边的同事编写）

他使用具有以下不推荐使用的语法的“范围”指令

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

我想访问插槽范围的“数据”道具，但我想将旧语法迁移到新语法，文档未能解释如何。

另外，我尝试将 scope="head[epc]" 更改为 v-slot 并且控制台警告我混合语法。

欢迎任何帮助。谢谢。

Answer 1

我只能猜测这HEAD[epc]是您子组件中的文字插槽名称，例如

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

为了使用它，您需要创建一个dataorcomputed属性来表示它并使用动态插槽名称语法。例如，在您的父组件中

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