1.2 vue2(组合式API)的语法结构以及外部暴露

原创已于 2025-07-15 23:44:34 修改 · 308 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2025-07-15 18:47:18 首次发布

前端专栏收录该内容

6 篇文章

订阅专栏

vue2

vue3中可以写vue2的语法，vue2的结构像一个花盆里的根（根组件App.vue），根上可以插上不同的枝杈和花朵（组件）。

组件的结构：

// 这里写逻辑行为
<script lang="ts">
export default{
    name: 'App'
}
</script>
// 这里写页面结构（相当于html）
<template>

</template>
// 这里写页面装饰（相当于css）
<style>

</style>

html和css的基础打好，关于template和style标签的书写就很简单，这里需要着重讲解一下script标签的外部暴露（vue2特有的）

script

vue2 采用组件式API，name,data,methods,…都写在固定的key的内部里面，最后暴露出来。

外部暴露

组件只有导出（暴露），才能被其他组件引用，并且都用键值对写。

export default{
	name:'组件的名字'
	data(){
		return {
		// 数据
		// 这里注意，数据只能函数形式写，因为同组件多的话，避免数据污染，每个组件都有自己单独的数据。	
		}
	}
	methods:{
		// 这里写函数
		...
	},
	compute(){
	
	},
	setup(){
	// vue3的组合式API
	// 数据
	let a = 10;
	// 方法
	function 方法名()
	{
		...
	}
	...
	return{将数据，方法交出去，模板中才能使用}
	}
}

vue3 setup

setup与data或者methods等同级别，在setup中定义的数据，data或者methods等可以通过this.访问到，反之则不能。

但是在export default{}中写setup还需要交出去数据和方法，有更优雅的语法糖写法：

<script lang="ts" setup>
let a = 123;
...
</script>