全局组件和局部组件

最新推荐文章于 2024-07-15 16:14:03 发布

victor-维克特

最新推荐文章于 2024-07-15 16:14:03 发布

阅读量284

点赞数 1

分类专栏：前端框架vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qinqinde123/article/details/120147766

版权

前端框架vue 专栏收录该内容

47 篇文章 2 订阅

订阅专栏

一. 全局组件：在任何一个vue实例里面都可以使用

Vue.component("global-cmp", global_cpnc);

二. 局部组件：只在声明的vue实例里面起作用

const app03 = new Vue({
	el: "#app03",
	components: {
		/* 注册组件(局部组件:只能在app03中使用) */
		local_cmp: local_cpnc
	}
});

三. 组件实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app01">
			<global-cmp></global-cmp>
		</div>
		<div id="app02">
			<global-cmp></global-cmp>
			<!-- 局部组件在此不生效 -->
			<local_cmp></local_cmp>
		</div>
		<div id="app03">
			<global-cmp></global-cmp>
			<local_cmp></local_cmp>
		</div>
	</body>
	<script type="application/javascript" src="js/vue.js"></script>
	<script>
		/* 创建组件构造器对象 */
		const global_cpnc = Vue.extend({
			template: 
				`<div>
					<h2>我是标题</h2>
					<p>全局组件</p>
				<div>`
		});
		const local_cpnc = Vue.extend({
			template: 
				`<div>
					<h2>我是标题</h2>
					<p>局部组件</p>
				<div>`
		});
		/* 注册组件(全局组件:在所有的vue实例里面都可以使用) */
		Vue.component("global-cmp", global_cpnc);
	    
		const app01 = new Vue({
			el: "#app01"
		});
		
		const app02 = new Vue({
			el: "#app02"
		});
		
		const app03 = new Vue({
			el: "#app03",
			components: {
				/* 注册组件(局部组件:只能在app03中使用) */
				local_cmp: local_cpnc
			}
		});
		
	</script>
</html>

四. 截图

在这里插入图片描述

victor-维克特

关注

1
点赞
踩
0

收藏

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

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <my-cmp></my-cmp> <my-cmp></my-cmp> </div> <div id=
复制链接

扫一扫