Vue export default 函数的构成

最新推荐文章于 2025-06-15 09:55:55 发布

原创最新推荐文章于 2025-06-15 09:55:55 发布 · 1.8k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文详细介绍了Vue单页面组件中export default的写法顺序及各部分的作用，包括组件注册、数据定义、生命周期钩子等核心内容。

Vue export default 函数的构成

- 代码展示
- vue单页面组件export default的写法顺序

代码展示

<script>
	// 导入导航栏
	import TopBar from "@components/TopBar.vue";
	// 导入标签组件
	import { Toast } from 'vant';
	export default {
		mounted:{
		// 在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
		},
		data() {
		// 为变量赋值等
			return {
				message:"",
				list:[]
			}
		},
		methods: { 
		//编写js函数
		},
		components: { 
		//组件注册
			TopBar, 
			Toast
		},
	};
</script>

vue单页面组件export default的写法顺序

项目	Value
1.name	只有作为组件选项时起作用。1)组件自身的递归调用，就是在当前组件中，调用组件自己。2)当我们使用vue.js官方提供的调试工具调试时，可以看到组件的名称，更好地定位。3)最后一种应该是使用比较多的情况，就是当我们使用 keep-alive时可以使用include和exclude指定需要缓存和不需要缓存的组件。指定的依据就是组件的name。
2.components	注册组件最上边有引入
3.props	//接收父组件传递过来的参数
4.data	//定义变量,为变量赋值等
5.created	//模板渲染成html前调用，用于初始化属性值，然后再渲染成视图
6.methods	//编写js函数
7.mounted	//在模板渲染成html后调用，通常用于初始化页面完成后，再对html的dom节点进行一些需要的操作
8.computed	//computed是计算属性，也就是依赖其它的属性计算所得出最后的值
9.watch	//watch是去监听一个值的变化，然后执行相对应的函数