vue.js - 迁移 "slot"已弃用的语法

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>

我想访问插槽范围的“数据” Prop 但我想将旧语法迁移到新语法文档没有解释如何。

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

欢迎任何帮助。谢谢。

Answer 1

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

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

为了使用它，您需要创建一个data 或computed 属性来表示它并使用dynamic slot name syntax .例如，在你的父组件中

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