时间戳

首页 > 解决方案 > Vue.js：$attrs 是只读的，$listeners 是只读的

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

问题描述

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

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 实例？

标签： typescriptvue.jsvuetify.jsnpm-link

解决方案

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

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

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

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

推荐阅读