我是Vuejs的新手，每次按下按键都会收到以下警告：
[Vue warn]: $attrs is readonly.
found in
---> <RouterLink>
<HeaderComponent> at src\components\Header_Component.vue
<App> at src\App.vue
<Root>
和
[Vue warn]: $listeners is readonly.
found in
---> <RouterLink>
<HeaderComponent> at src\components\Header_Component.vue
<App> at src\App.vue
<Root>
这些警告似乎根本没有影响可用性。我在任何地方都不会调用$ attrs或$ listeners，我不确定这些警告来自何处。
这是我的Header_Component.vue：
<template>
<header class="header">
<div class='nav nav-side nav-oneLine'>
<a class='nav-link' href='#'><router-link @click.native="addClass(), setLogoTrue('project')" to='/Projects'>PROJECTS</router-link></a>
<a class='nav-link' href='#'><router-link @click.native="addClass(), setLogoTrue('blog')" to='/Blog'>BLOG</router-link></a>
<a class='nav-link' href='#'><router-link @click.native="addClass(), setLogoTrue('aboutme')" to='/Aboutme'>ABOUT ME</router-link></a>
<a class='nav-link' href='#'><router-link @click.native="addClass(), setLogoTrue('resume')" to='/Resume'>RESUME</router-link></a>
</div>
</header>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
data() {
return{
logoTrue: <Object> {
'main': true,
'project': false,
'blog': false,
'aboutme': false,
'resume': false
},
main: <boolean>true,
header: <any>"",
image: <any>"",
h1: <any>"",
h2: <any>"",
nav: <any>"",
logos: <any>"",
break: <any>"",
}
},
components: {
insta, facebook, github, codepen, mainLogo, mainLogoSmall, test, projectsLogo, blogsLogo, aboutmeLogo, resumeLogo
}
methods:{
addClass(){
if (document.querySelector('.h2Active') == null && document.querySelector('.header_top') == null) {
this.add_newClasses()
this.emit_finished(true)
setTimeout(() => {
this.remove_separators()
}, 800)
} else {
console.log('classes already exist!')
this.$emit('reloadBackToTop')
}
},
remove_separators() {
let breaker = document.getElementsByClassName('separator')
while (breaker[0]) {
this.nav.removeChild(breaker[0])
}
},
setLogoTrue(target) {
for (var key in this.logoTrue) {
if (this.logoTrue.hasOwnProperty(key)) {
if (key == target) {
this.logoTrue[key] = true
} else {
this.logoTrue[key] = false
}
}
}
},
apply_topClasses() {
this.header.classList.add('header_top')
this.image.classList.add('imgStatic_top')
this.h1.classList.add('h1_name_top')
this.h2.classList.add('h2_name_top')
this.logos.classList.add('logo_links_top')
this.nav.classList.add('nav-side_top')
this.emit_finished(false)
},
add_newClasses() {
if (window.innerWidth < 1060) {
this.nav.classList.add('navActive_small')
this.image.classList.add('imgActive_small')
} else {
this.nav.classList.add('navActive')
this.image.classList.add('imgActive')
}
this.logos.classList.add('logo_linksActive')
this.header.classList.add('headerActive')
this.h1.classList.add('h1Active')
this.h2.classList.add('h2Active')
this.image.classList.remove('imgStatic')
},
emit_finished(delay:boolean) {
if (delay) {
setTimeout (() => {
this.$emit('finishedLoading')
console.log('finished_loading')
}, 2000)
} else {
console.log('here')
this.$emit('finishedLoading')
}
},
adjust_clientWidth() {
if (window.innerWidth < 1060) {
// this.remove_separators()
let bigActive = document.getElementsByClassName('big-nav')
let navActive = document.getElementsByClassName('navActive')
if (bigActive.length > 0) {
this.nav.classList.add('small-nav')
this.nav.classList.remove('big-nav')
this.image.classList.add('small-img')
this.image.classList.remove('big-img')
} else if (navActive.length > 0) {
this.nav.classList.add('small-nav')
this.nav.classList.remove('nav-side')
this.nav.classList.remove('navActive')
this.image.classList.add('small-img')
this.image.classList.remove('imgActive')
}
} else {
let smallActive = document.getElementsByClassName('small-nav')
let smallnavActive = document.getElementsByClassName('navActive_small')
if (smallActive.length > 0) {
this.nav.classList.add('big-nav')
this.nav.classList.remove('small-nav')
this.image.classList.add('big-img')
this.image.classList.remove('small-img')
} else if (smallnavActive.length > 0) {
this.nav.classList.add('big-nav')
this.nav.classList.remove('nav-side')
this.nav.classList.remove('navActive_small')
this.image.classList.add('big-img')
this.image.classList.remove('imgActive_small')
}
}
}
},
created: function() {
window.addEventListener('resize',this.adjust_clientWidth)
},
mounted: function() {
this.header = document.getElementsByClassName('header')[0]
this.image = document.getElementsByClassName('img')[0]
this.h1 = document.getElementsByClassName('h1_name')[0]
this.h2 = document.getElementsByClassName('h2_name')[0]
this.nav = document.getElementsByClassName('nav')[0]
this.logos = document.getElementsByClassName('logo_links')[0]
if (window.location.hash != "#/") {
this.remove_separators()
if (window.location.hash == "#/Projects") {
this.setLogoTrue('project')
} else if (window.location.hash.includes("#/Blog") || window.location.hash.includes("#/blog")) {
this.setLogoTrue('blog')
} else if (window.location.hash == "#/Aboutme") {
this.setLogoTrue('aboutme')
} else if (window.location.hash == "#/Resume") {
this.setLogoTrue('resume')
}
this.apply_topClasses()
}
}
})
</script>
<style lang="css" scoped>
(...)
</style>
谢谢您的帮助！
答案 0 :(得分：0)
您可能已经从另一个问题中弄清楚了，我在这里发布答案以节省其他人的时间。
出现此类错误的原因通常是因为您多次导入Vue。首先在您的主应用程序中，然后在您的组件文件中。 因此，从您的 Header_Component.vue 的'vue'中删除 import Vue行将解决此问题。 但是您将不得不更改声明组件的方式：
<script lang="ts">
//import Vue from 'vue' <-- Commented the import line
export default { // <-- Removed Vue.extend()
data() {
return{
logoTrue: <Object> {
'main': true,
'project': false,
'blog': false,
'aboutme': false,
'resume': false
},
main: <boolean>true,
header: <any>"",
image: <any>"",
h1: <any>"",
h2: <any>"",
nav: <any>"",
logos: <any>"",
break: <any>"",
}
}
...more code...
}
</script>
Here关于单个文件组件的更多信息。
答案 1 :(得分：0)
这也可能是因为webpack并未按应有的方式处理依赖关系，因此，如果转到文件：
webpack.renderer.config.js
并将组件名称添加到whiteListedModules集合中并重建，这可以解决问题。
答案 2 :(得分：0)
从Header_Component.vue中的“ vue”中删除导入Vue