自定义组件的几种方式

全局组件

全局组件可以在vue控制的任意模板下使用

//注意组件命名方式
//1.kebab-case, 单词直接采用短横线-连接，eg: my-component,在dom中使用时
//<my-component>
//2.pascalCase,驼峰命名,首字母大写,eg: MyComponent,在dom中也是 <my-component>
Vue.component('my-component',{
	template: "<div>我是全局组件</div>",
	data: function(){return{
			name: 'lizhuli'
		}}
})

var vm1= new Vue({
		el: "#app",
		data:{
			name: 'name1'
		}
	})

var vm2 = new Vue({
		el: "#app2",
		data:{
			name: 'name2'
		}
	})
//在vm1和vm2中都能使用该全局组件

常见应用，如定义一个svgIcon

import SvgIcon from '@components/SvgIcon'
Vue.component('svg-icon',SvgIcon)

局部组件

仅在当前vue实例内有效

new Vue({
	el: "#app",
	data:{
		name: 'yy'
	}
	//局部组件
	components:{
		'my-xiaoming':{
			template: `<div>这是局部组件</div>`
		}
	}
})

这篇参考一下https://www.cnblogs.com/chenzongyan/p/10275010.html添加链接描述