【前端】vue拆分内容使可复用的一些方法

有的开发 比如我 看不惯一个文件过长，可以把一些可复用的东西、假数据、过长的配置方法拆分出去，通过几行引用使用。除组件化外，还有一些拆分内容的方法

1、引入style

除了定义全局样式外，也可以定义某模块下某几个文件的公用样式。如果要屏蔽全局样式污染，加 !important

<style lang="scss" scoped>
@import '@/views/Main/sysManage/glo.scss';
.container {
}
</style>

2、引入data

data.js

export const dataList1 = [
	{
		id: '',
		name: '',
	},
],
export const dataList2= [
	{
		id: '',
		name: '',
	},
],

index.vue

import { dataList1, dataList2 } from './data'; //(./data.js)
export default {
	data: {
		dataList: [],
	},
	created() {
		this.dataList = dataList1;
	},
}

3、引入method

function:

showInfo.js

export function showInfo(msg) {
	//
}

vue / js

import { showInfo } from './showInfo';
// 直接用   showInfo('');

class

mapHandle.js

export default class mapHandle {
	static func() {},
}

vue / js

import mapHandle from './mapHandle';
// 直接用   mapHandle.func();

类操作 默认引入 文件路径 另行百度

4、引入script

mixin了解一下

mixin.js

export default {
	data() {
		return {
			tableConfig: {},
			tableCol: [],
		}
	},
	methods: {
		handleClose() {
			this.$confirm('确认关闭？')
				.then(() => {
					this.closeEdit(); //是的没问题
				})
				.catch(() => {})
		},
		openAdd() {
			this.dialogVisiable = true; //是的没问题
		}
	}
}

index.vue

import mixinJS from './mixin'
export default {
	name: '',
	mixins: [mixinJS],
	data: {
		return {},
	},
}

这是真正的分身术

最后

以上就是务实翅膀最近收集整理的关于【前端】vue拆分内容使可复用的一些方法的全部内容，更多相关【前端】vue拆分内容使可复用内容请搜索靠谱客的其他文章。