Vue中Component全局组件和私有组件的定义和使用

最新推荐文章于 2025-07-13 15:12:45 发布

haoqi好奇

最新推荐文章于 2025-07-13 15:12:45 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 Vue

本文链接：https://blog.youkuaiyun.com/qq_41956789/article/details/99710572

前端同时被 2 个专栏收录

45 篇文章

订阅专栏

Vue

29 篇文章

订阅专栏

本文详细介绍了在Vue.js中如何定义全局和私有组件。包括使用内联模板和外部template id的方式，展示了不同组件的使用场景和定义方法。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>私有组件定义</title>
		<script src="lib/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 第一个全局组件 -->
			<all></all>
			<!-- 第二个全局组件 -->
			<all2></all2>
			<!-- 第一个私有组件 -->
			<one-component></one-component>
			<!-- 第二个私有组件 -->
			<two-component></two-component>
		</div>
		
		<!-- 全局组件第二种方法 -->
		<template id="all2">
			<h1>这是第二个全局组件,他通过template id 定义在外面</h1>
		</template>
		<template id="two">
			<h1>这是第二个私有组件，他通过template id 定义在外面</h1>
		</template>
		<script>
			// 第一种全局组件定义方法
			Vue.component('all',{
				template:'<h1>这是一个全局组件</h1>'
			})
			
			// 第二种全局组件定义方法
			Vue.component('all2',{
				template:'#all2'
			})
			
			var app=new Vue({
				el:'#app',
				data:{
					
				},
				methods:{
					
				},
				// 定义私有组件
				components:{
					oneComponent:{
						template:'<h1>这是第一个私有组件</h1>'
					},
					// 定义在外面的template
					twoComponent:{
						template:'#two'
					}
				}
			})
		</script>
	</body>
</html>