vue组件基础详解 — 全局组件、局部组件

最新推荐文章于 2024-09-18 13:43:15 发布

原创最新推荐文章于 2024-09-18 13:43:15 发布 · 310 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #组件基础 #全局组件 #局部组件

vue 专栏收录该内容

9 篇文章

订阅专栏

博客介绍了Vue组件的两种类型，即全局组件和局部组件，并对这两种组件进行了代码详解。

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

vue组件有两种，一种是全局组件，一种是局部组件。下面是关于两种组件的代码详解：

全局组件：

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	    <title>Document</title>
	    <script src="https://cdn.bootcss.com/vue/2.5.18-beta.0/vue.js"></script>
	    <style> </style>
	</head>
	<body>
	    <div id="app">
	        <!-- 使用全局组件 -->
	        <course-list></course-list>
	    </div>
	    <script>
	        // 全局组件
	        Vue.component('courseList', {
	            template: `<div>我是一个全局组件</div>`
	        })
	        const vm = new Vue({
	            el: '#app',
	            data: {
	
	            }
	        })
	    </script>
	</body>
</html>

局部组件（两种写法）：

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	    <title>Document</title>
	    <script src="https://cdn.bootcss.com/vue/2.5.18-beta.0/vue.js"></script>
	    <style></style>
	</head>
	<body>
	    <div id="app">
	        <!-- 使用局部组件 -->
	        <course></course>
	    </div>
	    
	     //写法一：
	    <script>
	        const vm = new Vue({
	            el: '#app',
	            data: {
	
	            },
	            //注册局部组件
	            components: {
	                course: {
	                    template: `<div>我是一个局部组件</div>`
	                }
	            }
	        })
	    </script>
	
	    //写法二：
	    <script>
	        // 局部组件(将局部组件注册成一个对象)
	        const courseList = {
	            template: `<div>我是一个局部组件</div>`
	        };
	        const vm = new Vue({
	            el: '#app',
	            data: {
	
	            },
	            components: {
	               courseList 
	            }
	        })
	    </script>    
	</body>
</html>