Vue全局组件和局部组件

最新推荐文章于 2022-05-21 21:29:26 发布

星~闪耀

最新推荐文章于 2022-05-21 21:29:26 发布

阅读量77

点赞数

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

本文链接：https://blog.csdn.net/Silly011/article/details/119006138

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

定义全局组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{message}}
			<cpn></cpn>
		</div>
		<script>
			//1.创建组件构造器
			const cpnC = Vue.extend({
				template:		
				`<div>
					<h2>我是标题</h2>
					<p>我是内容，甲方的罚款</p>
					
				</div>`
				
			})
			
			// 2.注册组件（全局组件,意味着可以在多个Vue的实例下面使用）
			Vue.component('cpn',cpnC)
			
			const app = new Vue({
				el:'#app',
				data:{
					message:'你好啊'
				}
			})
		</script>
	</body>
</html>

注意：

①全局组件中template里面的内容一定要用 ``引起来（且 `为Esc下面的键英文状态下的，而不是普通的‘’）
②要使用全局组件，必须在Vue实例下面

定义局部组件

在Vue实例中引用的组件是局部组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{message}}
			<cpn></cpn>
		</div>
		<script>
			//1.创建组件构造器
			const cpnC = Vue.extend({
				template:		
				`<div>
					<h2>我是标题</h2>
					<p>我是内容，甲方的罚款</p>
					
				</div>`
				
			})
			
		
			
			
			
			const app = new Vue({
				el:'#app',
				data:{
					message:'你好啊'
				},
				components:{
					//cpn为使用组件时的标签名
					cpn:cpnC
				}
			})
			
			//
		</script>
	</body>
</html>

一般Vue中局部组件使用更多

星~闪耀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue全局组件和局部组件

定义全局组件<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {
复制链接

扫一扫