vue组件的全局注册和局部注册

最新推荐文章于 2024-05-11 07:37:22 发布

我有一个梦！

最新推荐文章于 2024-05-11 07:37:22 发布

阅读量1.1k

点赞数 2

分类专栏：前端基础-Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_40951289/article/details/107042132

版权

前端基础-Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

说明

vue中的组件是vue.js最强大的功能之一，它可以扩展 HTML 元素，封装可重用的代码，实现代码的复用。今天将介绍一下组件的全局注册和局部注册。

全局注册

全局注册的组件，每一个HTML区域都可以引用。我们使用Vue.extend()来定义组件，使用Vue.component()来注册组件。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div id="app">
			<Hello></Hello>
        </div>
        <div id="root">
            <Hello></Hello>
        </div>
        <!-- Hello组件的内容写在这里 -->
		<template id="hello">
			<div>
				<p>{{msg}}</p>
			</div>
		</template>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
            //创建组件
			const Hello = Vue.extend({
				template: "#hello",
				data() {
					return {
						msg: "我是一个全局组件",
					};
				},
			});
			//注册组件
			Vue.component("Hello", Hello);
			new Vue({
				el: "#app",
			});
            new Vue({
				el: "#root",
			});
		</script>
	</body>
</html>

因为Hello是全局注册的组件，所以id为app的元素和root的元素中都可以引用它。

局部注册

局部注册的组件只能在注册过的实例中引用。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div id="app">
			<Hello></Hello>
        </div>
        <div id="root">
            <Hello></Hello>
        </div>
		<template id="hello">
			<p>{{msg}}</p>
		</template>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			//组件定义
			const Hello = Vue.extend({
				template: "#hello",
				data() {
					return {
						msg: "我是局部组件",
					};
				},
			});
			new Vue({
				el: "#app",
                //注册组件
				components: {
					Hello: Hello,
				},
			});
            new Vue({
                el:'#root'
            });
		</script>
	</body>
</html>

我们在id为app的实例中注册了组件Hello，所以我们在当前元素中可以引用Hello组件。但是在id为root的元素中不能引用，系统会给出警告，如下图所示。在这里插入图片描述

结语

上面就是vue组件中的全局注册和局部注册。当然，我介绍的比较简单，如果您还想更深入的了解vue的组件，请到vue的官网去查看。如果这篇文章对您有帮助的话，希望能帮我点个赞。
在这里插入图片描述

我有一个梦！

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue组件的全局注册和局部注册

说明vue中的组件是vue.js最强大的功能之一，它可以扩展 HTML 元素，封装可重用的代码，实现代码的复用。今天将介绍一下组件的全局注册和局部注册。全局注册全局注册的组件，每一个HTML区域都可以引用。我们使用Vue.extend()来定义组件，使用Vue.component()来注册组件。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta n
复制链接

扫一扫