vue @component继承的一些知识点详解

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