Vue 自定义组件

组件的特性

1.组件只能有一个根标签
2.记住两个词全局和局部
3.组件名称命名中‘-小写字母’相当于大写英文字母(my-coml 相当于 myComl)
如果不使用驼峰命名,则直接使用名称

1.使用component定义全局组件

// 使用 Vue.component('组件名称',组件模板)
<!-- 使用组件时直接把组件的名称以标签的形式引入进HTML中即可 -->
<mycoml></mycoml>

Vue.componen('mycoml',Vue.extend({
	template:'<div>考勤管理</div>';
	})
);

2.使用template#app外部定义全局组件

<div id="app">
	<mycoml></mycoml>
</div>

<template id="tmpl">
	//组件的根元素有且只能有一个
	<div>
		<h3>这个是使用template创建的组件</h3>
	</div>
</template>

Vue.componen('mycoml',Vue.extend({
	template:'#tmpl';
	})
);

3.使用componens定义私有组件

<div id="app">
	<mycoml></mycoml>
</div>

<template id="tmpl">
	//组件的根元素有且只能有一个
	<div>
		<h3>这个是一个私有组件创建的组件</h3>
	</div>
</template>

Vue.componen('mycoml',Vue.extend({
	template:'#tmpl';
	})
	var vm1 = new Vue({
		el:"app",
		data:{},
		methods:{},
		componens:{
			login:{
				template:"tmpl"
			}
		}
	})
);
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页