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

yc0p9oo0  于 2022-11-17  发布在  Vue.js
关注(0)|答案(3)|浏览(271)

我尝试使用vue-cli vue create d-components构建自己的组件库来实现Vuetify。我的组件通过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 installnpm link,然后在我的主Application文件夹中运行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示例吗?

dba5bblo

dba5bblo1#

是的,原因是重复的Vue示例,我认为应该在您的控制台中有关于这一点的警告。
原因是你的npm链接是在子模块中完成的--它会全局安装子模块包及其所有依赖项,包括Vue。你可以检查全局安装的子模块的node_modules目录,你应该在那里看到Vue。
因此,第一个Vue位于项目的node_modules中,第二个Vue位于组件的node_modules中(全局安装)。
解决方案是从您的项目目录使用npm link../component(不在组件目录中执行npm install)或者为组件执行npm publish并将其作为项目的常规依赖项安装。这不会导致将Vue安装到组件的node_modules目录中。

mbzjlibv

mbzjlibv2#

在我的例子中,重复的示例是由一些Vue插件导入的Vue示例与我的项目中设置的不同引起的。我设法通过在我的Webpack配置中添加以下内容来修复它:

externals: {
      // Stubs out `require('vue')` so it returns `global.Vue`
      vue: 'Vue',
    },

希望它能帮助任何在同样问题上挣扎的人:)

iswrvxsc

iswrvxsc3#

$vuetify required package vuetify

相关问题