Vue创建全局组件的三种方式

最新推荐文章于 2023-09-30 22:05:49 发布

朽木自雕xmzd

最新推荐文章于 2023-09-30 22:05:49 发布

阅读量409

点赞数

分类专栏：前端 # vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_16687863/article/details/103121000

版权

前端同时被 2 个专栏收录

107 篇文章 2 订阅

订阅专栏

vue

34 篇文章 0 订阅

订阅专栏

1、使用 Vue.extend 来创建全局组件

注意：当注册Vue.component("myCom1",com1);使用了驼峰命名，则在引用组件时需写成这种方式<my-com1></my-com1>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<my-com1></my-com1>
		</div>
		
		<script>
			let com1 = Vue.extend({
				template: "<h1>Hello</h1>"
			});
			
			Vue.component("myCom1",com1);
			
			var vm = new Vue({
				el: "#app",
				data: {}
			});
		</script>
	</body>
</html>

2、使用Vue.component()直接创建全局组件

注意：Vue.component("myCom1",{template: "<h1>Hello</h1>"})中只能有一个root（根）元素，如果写成Vue.component("myCom1",{template: "<h1>Hello</h1><span>111</span>"})这样，则会报错。应改成Vue.component("myCom1",{template: "<div><h1>Hello</h1><span>111</span></div>"})。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<my-com1></my-com1>
		</div>
		
		<script>
			Vue.component("myCom1",{template: "<h1>Hello</h1>"});
			
			var vm = new Vue({
				el: "#app",
				data: {}
			});
		</script>
	</body>
</html>

3、通过template元素创建全局组件

注意：必须要写在vue实例控制的区域外面，优点：此种方式有代码智能提示和高亮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<my-com1></my-com1>
		</div>
		<template id="com">
			<div>
				<h1>Hello</h1>
			</div>
		</template>
		<script>
			Vue.component("myCom1", {template:"#com"});
			
			var vm = new Vue({
				el: "#app",
				data: {}
			});
		</script>
	</body>
</html>

朽木自雕xmzd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue创建全局组件的三种方式

1、使用 Vue.extend 来创建全局组件注意：当注册Vue.component("myCom1",com1);使用了驼峰命名，则在引用组件时需写成这种方式<my-com1></my-com1><!DOCTYPE html><html> <head> <meta charset="utf-8"> &l...
复制链接

扫一扫