2

我尝试使用的组件是用 Vue2 编写的，并通过 NPM 作为 web 组件安装。我的新项目是在 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>

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

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

4

1 回答 1

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>
于 2021-09-23T13:35:09.427 回答