如何在Vue3中使用Vue2 Vue3组件中的插槽？
如何在Vue3中使用Vue2 Vue3组件中的插槽？
提问于 2021-09-23 12:48:35
我尝试使用的组件是用Vue2编写的，并通过NPM作为NPM组件安装。我的新项目是在Vue3中创建的。
我正在尝试使用组件插槽，但它不工作。
当我尝试执行以下操作时，我没有得到任何错误，但在webcomponent的插槽中没有呈现任何内容：
<my-webcomponent-with-two-slots>
<main>
<div>Hello World</div>
</main>
<sidebar>
<div>Hello World</div>
</sidebar>
</my-webcomponent-with-two-slots>当我尝试执行以下操作时，我得到一个错误：error 'slot' attributes are deprecated vue/no-deprecated-slot-attribute
<my-webcomponent-with-two-slots>
<div slot="main">
<div>Hello World</div>
</div>
<div slot="sidebar">
<div>Hello World</div>
</div>
</my-webcomponent-with-two-slots>我无法更改或升级我要使用的use组件。如何在我的Vue3项目中使用它？
编辑:我应该澄清的是，Vue2组件使用的是用Vue2编写的旧项目，使用的是第二个示例。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-09-23 13:35:09
Vue正在抱怨已更改为v-slot的旧slot属性。但是您使用的不是vue插槽，而是WebComponent的原生插槽属性。因此您可以在.eslintrc.js文件中安全地禁用此检查，方法是添加
rules: {
'vue/no-deprecated-slot-attribute': 'off',
}添加到您的规则以全局禁用此规则。
或者，如果您想为单行禁用它，请在该行之前添加以下内容：
<!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
<div slot="main">
<div>Hello World</div>
</div>
<!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
<div slot="sidebar">
<div>Hello World</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69300349
复制相关文章
相似问题
腾讯云开发者
