vue.js - 我如何在 Vue3 中使用来自 Vue2 webcomponent 的插槽？

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>

我无法更改或升级我想使用的网络组件。我如何在我的 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>