如何在 Vue 3 中使用来自 Vue2 Web 组件的插槽？

Posted 2023-02-16

【中文标题】如何在 Vue 3 中使用来自 Vue2 Web 组件的插槽？

【英文标题】：How do I use slots from a Vue2 webcomponent in Vue3?

【发布时间】：2021-11-16 20:56:28

【问题描述】：

我尝试使用的组件是用 Vue2 编写的，并通过 NPM 作为 web 组件安装。我的新项目是在 Vue3 中创建的。

我正在尝试使用组件插槽，但它不起作用。

当我尝试以下操作时，我没有收到任何错误，但 web 组件的插槽内没有呈现任何内容：

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

我无法更改或升级我想使用的 web 组件。如何在我的 Vue3 项目中使用它？

编辑：我应该澄清一下，webcomponent 正在使用用 Vue2 编写的旧项目，使用第二个示例。

【参考方案1】：

Vue 抱怨旧的 slot 属性已更改为 v-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>

【讨论】：

嘿！在我听从您的建议后，我仍然遇到错误，但在执行以下“npm i eslint-loader@2.1.2”（在此处找到github.com/vuejs/vue-cli/issues/4231）之后，您的解决方案有效。非常感谢！