Vue中Component全局组件和私有组件的定义和使用_component :is 价值component全局-优快云博客

全局组件和私有组件的区别：
全局组件：可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中
私有组件：只在当前的vue模型中可以使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>私有组件定义</title>
		<script src="lib/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 第一个全局组件 -->
			<all></all>
			<!-- 第二个全局组件 -->
			<all2></all2>
			<!-- 第一个私有组件 -->
			<one-component></one-component>
			<!-- 第二个私有组件 -->
			<two-component></two-component>
		</div>
		
		<!-- 全局组件第二种方法 -->
		<template id="all2">
			<h1>这是第二个全局组件,他通过template id 定义在外面</h1>
		</template>
		<template id="two">
			<h1>这是第二个私有组件，他通过template id 定义在外面</h1>
		</template>
		<script>
			// 第一种全局组件定义方法
			Vue.component('all',{
				template:'<h1>这是一个全局组件</h1>'
			})
			
			// 第二种全局组件定义方法
			Vue.component('all2',{
				template:'#all2'
			})
			
			var app=new Vue({
				el:'#app',
				data:{
					
				},
				methods:{
					
				},
				// 定义私有组件
				components:{
					oneComponent:{
						template:'<h1>这是第一个私有组件</h1>'
					},
					// 定义在外面的template
					twoComponent:{
						template:'#two'
					}
				}
			})
		</script>
	</body>