vue学习--组件注册

最新推荐文章于 2024-04-17 18:00:36 发布

刘远山

最新推荐文章于 2024-04-17 18:00:36 发布

阅读量167

点赞数

本文链接：https://blog.csdn.net/weixin_39218464/article/details/106444463

版权

组件名命名规则

第一种：短横线分隔命名

Vue.component('my-component-name', { /* ... */ })

调用组件

<my-component-name>

第二种：驼峰命名

Vue.component('MyComponentName', { /* ... */ })

调用组件

<my-component-name> 和 <MyComponentName> 都是可接受的

局部注册

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>局部注册组件</title>
	</head>
	<script type="text/javascript" src="./js/vue.js"></script>
	<body>
		<div id="app">
			<button-counter></button-counter>
			<!-- 调用test组件 -->
			<test></test>
		</div>
	</body>
	<script type="text/javascript">
		Vue.component('button-counter', {
			props: ['title'],
			data : function () {
				return {}
			},
			template: '<div> </div>',
			methods:{
				
			},
		});
		var vm = new Vue ({
			el : "#app",
			data : {
				clicknow : function (e) {
					console.log(e);
				}
			},
			//声明components进行局部注册
			components:{
				test : {//将test声明成对象形式，template作为test对象的属性
					template:"<h2>h2...</h2>"//声明模板属性template，对其进行模板赋值
				}
			}
		});
	</script>	
</html>

显示结果页面
在这里插入图片描述

刘远山

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习--组件注册

组件名命名规则第一种：短横线分隔命名Vue.component('my-component-name', { /* ... */ })调用组件<my-component-name>第二种：驼峰命名Vue.component('MyComponentName', { /* ... */ })调用组件<my-component-name> 和 <MyComponentName> 都是可接受的局部注册<!DOCTYPE html>&lt
复制链接

扫一扫