Vue组件--创建组件常用方式及其注意点

最新推荐文章于 2023-04-18 17:56:47 发布

AsaZyf

最新推荐文章于 2023-04-18 17:56:47 发布

阅读量669

点赞数

分类专栏： Vue Vue组件文章标签： Vue Vue组件 Vue component component Vue创建组件

本文链接：https://blog.csdn.net/AsaZyf/article/details/83590940

版权

Vue 同时被 2 个专栏收录

50 篇文章 1 订阅

订阅专栏

Vue组件

11 篇文章 0 订阅

订阅专栏

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>component定义组件注意点</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<div id="app">
			<o-test></o-test>
		</div>
		<script>
//			Vue-component定义组件的名称时，若使用了驼峰命名，在引用组件时需把大写字母改为小写，同时两者之间用“-”链接
			Vue.component("oTest",{
				//注意:timplate属性指向的模板内容必须有且只能有唯一的一个根元素【也就是包裹着它的父元素】
				template:`
				   <div>
				       <h3>你好</h3>
				       <h4>我们都被div包着,所以不报错</h4>
				   </div>
				`
			})
			
			new Vue({
				el:"#app",
				data:{
					
				}
			})
		</script>
	</body>
</html>