Vue组件化语法糖以及模板抽离

最新推荐文章于 2025-01-14 08:53:32 发布

渣渣圆

最新推荐文章于 2025-01-14 08:53:32 发布

阅读量270

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44154577/article/details/117386200

版权

Vue 专栏收录该内容

22 篇文章

订阅专栏

这篇博客介绍了Vue.js中如何使用语法糖简化组件的全局和局部注册过程，以及模板的分离写法。通过示例代码展示了如何使用<script>和<template>标签来定义和绑定模板，并在实际应用中分别展示了全局和局部组件的语法糖用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

语法糖
- Vue为了简化这个过程，提供了注册的语法糖
- 主要是省去了调用Vue.extend()的步骤，而是可以直接使用一个对象来代替
全局组件和局部组件语法糖
模板的分离写法
- 使用<script>标签
- 使用<template>标签

在这里插入图片描述

通常使用<template>比较多，两种方式都是通过id的方式来绑定使用

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<div id="app"> 
	<div>
	<my-cpn1></my-cpn1>
	<my-cpn2></my-cpn2>
	<my-cpn3></my-cpn3>
	</div>
	</div>
	<template id="mycpn1">
		<div>我是抽离了模板内容</div>
	</template>
	<template id="my-cpn4">
		<div>全局模板</div>
	</template>
	<body>
		<script>
			
			//全局语法糖
			Vue.component('my-cpn3',{
				template:'#my-cpn4'
			})
			
			var app =new Vue({
				el:"#app",
				//局部语法糖
				components:{
					'my-cpn1':{
						template:`#mycpn1`
					},
					'my-cpn2':{
						template:`<div>我是模板内容2</div>`
					}
				}
			})
		</script>
	</body>
</html>