Vue.component用法

Vue.js全局与局部组件的创建与使用

最新推荐文章于 2025-09-17 20:24:19 发布

原创最新推荐文章于 2025-09-17 20:24:19 发布 · 640 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #html

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Vue.js中创建和使用全局及局部组件。全局组件通过`Vue.component()`方法定义，可以在整个应用范围内使用。案例展示了如何定义一个名为`miao`的全局组件，包含数据和模板。局部组件则在Vue实例的`components`选项内定义，如`zhang`组件，其模板定义在`<template>`标签中，并通过`template:'#zhang'`指定。这两种方式丰富了Vue应用的组件化构建能力。

全局组件

用法：

Vue.component( id, [definition] )
参数：
{string} id
{Function | Object} [definition]

具体参考：https://vuejs.bootcss.com/api/?#Vue-component

案例：

<html>
<head>Vue.js</head>
<body>

	<div id="app">
		<div>
			<miao></miao>
		</div>
	</div>
	
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	
	<script>
		Vue.component("miao",{
			name:"miao",
			data(){
				return{
					hello:"hello miao"
				}
			},
			template:"<h1>{{hello}}</h1>"
		})
		var app = new Vue ({
			el:"#app",
			data:{
			
			},
		})
	</script>
	
</body>
</html>

输出：
在这里插入图片描述

局部组件

案例：

<html>
<head>Vue.js</head>
<body>

	<div id="app">
		<div>
			<zhang></zhang>
		</div>
	</div>
	
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	
	<template id="zhang">
		<h2>{{hello}}</h2>
	</template>
	
	<script>
		var app = new Vue ({
			el:"#app",
			data:{
			
			},
			components:{
				zhang:{
					name:"zhang",
					data(){
						return{
							hello:"hello zhang"
						}
					},
					template:'#zhang'
				}
			}
		})
	</script>
	
</body>
</html>