es6 类的导出、引入以及继承

news/2024/7/11 0:45:12 标签: javascript, es6
导出的关键字 : export + 类名
	举例:
		export class Name {...}
	

	
导入的关键字: import { 类名或模块名称 } from 文件相对地址
	举例:
		import { Name, Location } from './userinfo';
		


对于导入模块名称重复的处理:
	重命名: import { 类名 as 新类名 } from 文件相对地址
	举例:	
		import { Name } from './userInfo';
		import { Name as DepartmentName } from './departmentInfo';



整体导入:
	通过关键字 * 整体导入所有允许导入的类,调用时通过.属性名的方式访问
	举例:
		import * as info  from './userinfo';
		name = new info.Name();
		age = new info.Age();		
		


类的继承
	export class Name {
		name;
		// 构造函数中初始化数据
		constructor(name) {
			this.name = name;
		}
		// 对外开放的访问方法
		getName() {
			console.log(`My Name Is ${this.name}`);
		}
	}
	
	通过super关键字,子类可以继承父类的构造,构造参数 以及 
	import { Name } from './userinfo';
	export class UserInfo extends Name {
		age;
		constructor(name, age) {
			super(name);
			this.age = age;
		}
		getUserInfo() {
			super.getName();
			console.log('My Age Is ${this.age}');
		}
	}

 


http://www.niftyadmin.cn/n/1162493.html

相关文章

win10远程连接ubuntu16.04方法

Ubuntu16.04端: 1、打开终端,安装xrdp,vncserver,xbase-clients sudo apt-get install xrdp vnc4server xbase-clients 2、安装desktop sharing(Ubuntu16.04默认已经安装),可以到应用商店下载。打开desktop sharing…

Linux:readonly option is set (add ! to override)错误

在使用vim修改完一些配置文件时,当你退出时经常会出现’readonly’ option is set (add ! to override)的问题 通常有三种情况: 1、 该错误为当前用户没有权限对文件作修改,这种情况可以强制退出:q!,先取得root权限后进行修改(roo…

vue provide / inject 使用介绍

作用: 父子组件跨层级传递数据 优势: 解决了组件层级过多时,数据传递麻烦的问题 主要应用场景: 为高阶插件/组件库提供用例,不推荐在应用程序中使用 缺点: 数据追踪困难,不确定数据注入层&am…

Vue Typescript 装饰器@Component

vue-property-decorator 在 vue-class-component 上增强更多的结合 Vue 特性的装饰器, 对 Vue 组件进行了一层封装,让 Vue 组件语法在结合了 TypeScript 语法更加贴近面向对象编程.并提供一个工具函数一个装饰器: 语法:Component(options)说明&#xff…

Vue Typescript mixins 混入

首先定义要混淆的类: // FilePath: \hello-typescript\src\mixins\GreetingWords.ts import Vue from vue import Component from vue-class-componentComponent export default class MyMixins extends Vue {// data// 通过混入的方式将属性赋值给其他组件mixinVa…

Vue Typescript data/method/computed的转变

data 以成员变量的形式存在method 以类的函数形式存在computed 使用 get 标识 <!--* Author: your name* Date: 2020-12-02 14:30:50* LastEditTime: 2020-12-02 17:00:58* LastEditors: Please set LastEditors* Description: In User Settings Edit* FilePath: \hello-ty…

Vue Typescript @Watch

语法&#xff1a;Watch(path: string, options: WatchOptions {})参数说明&#xff1a;path: string类型 被侦听的属性名options&#xff1a;类型WatchOptions{}&#xff0c;可以包含两个属性immediate boolean 侦听开始之后是否立即调用该回调函数&#xff1b;deepboolean 被…

Vue Typescript @Model

定制prop和event 用作双向数据绑定 默认情况下, 一个组件上的v-model会:将 value用作 prop将 input用作 event语法&#xff1a; model: {prop?: string, event?: string} <!--* FilePath: \hello-typescript\src\components\Child.vue --> <template><div sty…