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>

我要访问广告位范围“数据”道具但我想将旧语法迁移到新语法上该文档无法说明操作方式。

此外，我尝试将scope =“ head [epc]”更改为v槽，控制台警告我混合语法。

任何帮助都将受到欢迎。谢谢。

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>

迁移“ slot”弃用的语法

1 个答案: