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

Question

我尝试使用 vue-cli vue create d-components 构建自己的实现 Vuetify 的组件库。我的组件是通过在我的库的 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

$vuetify required package vuetify

Answer 2

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

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

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

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

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

Vue.js : $attrs is readonly, $listeners is readonly

typescript

vue.js

vuetify.js

npm-link