Vue.js：$attrs 是只读的，$listeners 是只读的

Question

我尝试使用 vue-cli vue create d-components 构建自己的实现 Vuetify 的组件库。我的组件是通过在我的 lib 的 main.ts 文件中导出的 install 函数注册的，例如：

import Vue, { VueConstructor } from 'vue';
import Vuetify from 'vuetify';
import DBtn from "./components/DBtn.vue";

Vue.use(Vuetify)

export default {
  install(vue: VueConstructor): void {
    vue.component("d-btn", DBtn);
    ...
  }
}

而一个组件定义为：

<template>
  <v-btn v-bind="$attrs" v-on="$listeners" elevation="0" small>
    ...
  </v-btn>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({})
export default class DBtn extends Vue {}
</script>

我将此库作为 git 子模块添加到我的主 Vue.js 应用程序（也使用 Vuetify）中，在子模块的根文件夹中运行 npm install 和 npm link，然后在我的主应用程序文件夹中运行 npm link d-components .

我的应用程序正在通过以下方式导入和调用我的库的安装函数：

import Vue from 'vue';
import DComponents from "d-components" // library's name

Vue.use(DComponents);

目前看来一切正常。

但是当我尝试使用我的库的组件时，我得到了一堆错误：

[Vue warn]: $attrs is readonly.

[Vue warn]: $listeners is readonly.

这似乎是因为在我的应用程序中创建了两个 Vue 实例，我搜索了我的所有 Vue 导入是否相同，我只能在我的主应用程序中找到 import Vue from 'vue' 和我的图书馆。

有谁知道如何检查我是否创建了多个 Vue 实例？

Answer 1

是的，原因是重复的 Vue 实例，我认为您的控制台中应该有关于此的警告。

原因是您的 npm 链接 在 submodule 中完成 - 它全局安装 submobule 包及其所有依赖项，包括 Vue。您可以查看全局安装的子模块的 node_modules 目录，您应该在那里看到 Vue。

因此，您在项目的 node_modules 中有第一个 Vue，在组件的 node_modules 中有第二个 Vue（全局安装）。

解决方案是使用项目目录中的 npm link ../component（不在组件目录中执行 npm install）或者为组件执行 npm publish 并安装它作为您项目的常规依赖项。这不会导致将 Vue 安装到组件的 node_modules 目录中。

Answer 2

$vuetify required package vuetify