迁移“槽"不推荐使用的语法 [英] Migrating "slot" deprecated syntax
问题描述
我在 vue.js 2.6.1 上运行当前代码(由不在身边的同事编写)
他使用了带有以下弃用语法的范围"指令
<div><p class="column-title">{{data.label}}</p><p class="explanation-text">{{data.field.explanation}}</p></模板>
我想访问插槽范围的数据"道具但我想将旧语法迁移到新语法上文档没有解释如何.
此外，我尝试将 scope="head[epc]" 更改为 v-slot，控制台警告我混合语法.
欢迎任何帮助.谢谢.
我只能猜测 HEAD[epc] 是你的子组件中的字面插槽名称，例如
为了使用它，您需要创建一个 data 或 computed 属性来表示它并使用 动态插槽名称语法.例如，在您的父组件中
data: () =>({slotname: 'HEAD[epc]'})Vue.component('Test', {数据:() =>({标签:'标签'，场地: {解释:'解释'}}),模板:`<h1>测试</h1><slot name="HEAD[epc]" :label="label" :field="field"></slot>`})新的 Vue({el: "#app",数据:() =>({slotname: 'HEAD[epc]'})})
.column-title {字体粗细:粗体；}.解释文本{颜色:蓝色；}<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></脚本><div id="应用程序"><测试><模板 v-slot:[slotname]="data"><div><p class="column-title">{{data.label}}</p><p class="explanation-text">{{data.field.explanation}}</p></模板></测试>
I'm running on vue.js 2.6.1 the current code (written by a co-worker who's not around anymore)
He used the 'scope' directive with the following deprecated syntax
<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>
I want to access the slot-scope "data" prop but I want to migrate the old syntax onto a new one the documentation fails to explain how.
also, I tried changing the scope="head[epc]" to v-slot and the console warns me of mixed syntax.
Any help would be welcome. Thanks.
I can only guess that HEAD[epc] is a literal slot name within your child component, eg
<slot name="HEAD[epc]" :label="label" :field="field"></slot>
In order to use this, you will need to create a data or computed property to represent it and use the dynamic slot name syntax. For example, in your parent component
<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>
这篇关于迁移“槽"不推荐使用的语法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
