Error in nextTick “TypeError Cannot read property ‘xxx‘ of undefined“

最新推荐文章于 2025-03-07 22:28:14 发布

原创

最新推荐文章于 2025-03-07 22:28:14 发布 · 900 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

在Vue应用中遇到'TypeError: Cannot read property 'xxx' of undefined'的错误通常是因为尝试在子组件未完全加载时访问其属性。建议通过props从父组件传递数据，并避免子组件直接修改。使用watch时要注意，只有当参数变化时才会触发监听，可以通过设置deep和immediate属性来控制监听行为。

报这个错主要是因为子组件还没加载完成就对子组件进行赋值，推荐使用第一个

		this.$nextTick( ()=> {
			//修改子组件的内容
        });
        //或
        setTimeout(() => {
       		//修改子组件的内容
		}, 50);

父组件传值给子组件，子组件不能直接修改，会报错

//子组件修改父组件的值
this.$emit('名字','值');

//子组件调用父组件的方法
this.$emit('方法', val)
//或
this.$parent.fatherMethod();
//或
<child :fatherMethod="fatherMethod"></child>

props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },


//父组件修改子组件的值
<tag ref="xxx" @b='b'></tag>
this.$refs.xxx.a = 1

//父组件调用子组件的方法
this.$refs.xxx.b()

watch中设置参数说明：有变化才能被监听
deep：是否深度监听
immediate：是否在页面初始化时就启用，true：是

//监听files变化
 watch: {
  files: {
    handler (newValue, oldValue) {
      console.log(newValue)
      this.fileList = newValue
    },
    deep: true // 默认值是 false，代表是否深度监听
  }
}



//监听对象的变化
data() {
　return {
　　files: {
　　　name: 'demo'
　　}   
  }
},
watch: {
  files: {
	handler(newVa