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

Question

我尝试使用的组件是用 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 编写的旧项目，使用第二个示例。

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