vue——@component——继承的一些知识点

最新推荐文章于 2025-05-06 20:22:53 发布

原创最新推荐文章于 2025-05-06 20:22:53 发布 · 4k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue #继承 #components #this

vue 同时被 2 个专栏收录

30 篇文章

订阅专栏

28 篇文章

订阅专栏

本文探讨了在Vue中使用@Component注解时，如何处理this绑定，特别是涉及父子组件继承的情况。当父类未使用注解，this可能为undefined，需要通过不传递参数或在事件处理函数中传递$event来正确访问。而当父类使用@Component后，子类不能通过super.created()继承，会导致错误。同时，文章展示了具体的代码示例，揭示了Vue中组件继承和this访问的微妙之处。

2021年7月29日

没有写注解（@component ）：

父类没有写注解，那么父类的函数的 this 绑定会找不到地方，此时 this是 undefined。如果想绑定 this 成功，有两种情况：

//1 不传递参数
<span @click="fn">-</span> // HTML
fn(){ console.log(this.name) } // JS

//2 传参的时候参数写全，写上$event
<span @click="fn($event)">-</span> // HTML
fn( key ){ console.log(this.name, key) } // JS

写了注解：
- 这时候 this 随便访问，但是字类不可以用 super.created()来继承了。继承的话会报错，call函数无法访问

---------------以下是原文-----------------

vue的@component的学习

背景：

有一次要用到继承来写，继承里面又涉及到 super.created() 的访问，然后又涉及到在父类访问 this.$store 和 this.属性 ... 这些都出问题了，报错信息写在

情况：

祖父类：

import components1 from '@/components';
import { Component, Vue } from 'vue-property-decorator';

@Component({
	components: { components1 },
})
export class GrandFather extends Vue {
	attr1 = false;
	attr2 = false;

	static f1: () => void;

	static f4: () => void;
}

父类：

// @Component 如果不注释掉，子类继承的时候调用super 会报错，详细见子类 🧡
export default class Father extends GrandFather {
    attr3='x'
	getList() {}

	created() {
		this.getList(); //⭐ 可以访问
	}

	// handle1({ item, key }) {
	// 	 this.$store.commit(AAA, { // ⭐ this → undefined
	//		 a1: this.attr1, //⭐ this → undefined
	//		 a2:  key
	//	 });
	// }

	handle1(e) {
		e.item.$store.commit(AAA, { 
			a1: e.item.$route.name.slice(3),  // 这是取巧
			a2: e.key
		});
	}
}

/*  我不知道为什么啊 ┭┮﹏┭┮，为什么穿了参数的函数就访问不了本类的 this，
 没传参数的就可以访问本类的this */

子类

import * as api from '@/api/index';
import { Component } from 'vue-property-decorator';
import Father from '../index.calss';

@Component
export default class extends Father {
	list = [];

	created() {
		super.created(); //🧡  Cannot read property 'call' of undefined
	}

	getList() {
		api.getTableList(params)
			.then((data) => {
				this.list = data.data
			})
			.catch(() => {});
	}
}

参考：

vue-ts中的@Component