Vue学习笔记_新手报错整理

最新推荐文章于 2024-05-29 11:33:57 发布

橙橙桶

最新推荐文章于 2024-05-29 11:33:57 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/Dorothy1224/article/details/99299526

Vue 专栏收录该内容

21 篇文章

订阅专栏

这篇博客总结了Vue学习中遇到的一些新手常见错误，包括等号操作符使用错误、单向数据流报错和自定义组件点击事件不触发的问题，并详细解释了问题的原因和提供了解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

报错：
vue.js:634 [Vue warn]: Property or method "w" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
关键代码：

	<div id="vm7">
        <child :content="w"></child>
        <child content='k'></child>
    </div>
    <script>
		Vue.component('child',{
            props:['content'],
            template:'<div @click="handleClick">{{content}}</div>'
        });
	</script>

问题解释：
组件使用:content的那行报错，而content那行没有报错。
加:content等号后面相当于是js表达式，而content等号后面是字符串的内容。
解决方法：
方法一：将:content换为第二行的写法content
方法二：<child :content="'w'"></child> 给字符串w加上引号，表示w只是字符串类型，并不是未定义的变量。

报错：vue.js:634 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "content"
此报错含义是，在子组件里修改了父组件的值，由于是单向数据流，所以不允许子组件修改父组件的数据。
解决方法：
在子组件里，定义data，拷贝一份父组件待修改的值，在修改时，使用子组件内定义的拷贝值。
自定义组件的@click 无法触发
原因：
自定义组件上注册的事件触发的是自定义的事件，而不是原生的click本身事件。
解决方法：@click.native 注册原生click事件
build 时报错：

ERROR in ./src/main.js
Module build failed: Error: /Users/***/.eslintrc.js:
        Configuration for rule "no-debugger" is invalid:
        Severity should be one of the following: 0 = off, 1 = warn, 2 = error (you passed '"Error.vue"').

    at validateRuleOptions (/Users/***/node_modules/eslint/lib/config/config-validator.js:119:19)
    at Object.keys.forEach.id (/Users/***/node_modules/eslint/lib/config/config-validator.js:162:9)
    at Array.forEach (<anonymous>)
    ......

解决：
修改.eslintrc.js文件：
旧报错代码：(自动生成的，也不知道为什么不对~)

   rules: {
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'Error.vue' : 'off'
  }

修改后的：

  rules: {
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 //注意：此处还一定要用number类型
  }

持续更新~