Vue中抽离组件模板的几种方式

1.全局组件和局部组件的创建

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="https://unpkg.com/vue"></script>
	</head>
	<body>
		<div id="app">
			<component-public></component-public>
		</div>

		<div id="app2">
			<component-public></component-public>
		</div>
	</body>
</html>


<script type="text/javascript">
		Vue.component('component-public', {
			template:`<div>
						<h1>全局组件</h1>
					</div>`
		})
		const app = new Vue({
			el:"#app", 
			components:{ // 局部组件
				"component-private":{
					template:`
						<div>
							账号<input type="text" name="" id="" value="" />
							密码<input type="password" name="" />
							<button class="btn btn-success">登录</button>
							
						</div>
					`
				}
			}
		})

		const app2 = new Vue({
			el:"#app2"
		})
	</script>
</html>

2.组件模板分离编写的方式

  1. 通过script标签创建
   	
   <script type="text/x-template" id="component-script">
   	<div>
   		通过script标签编写组件
   	</div>
   </script>
  1. 通过template标签创建
	<template id="component-template">
   		<div>
   			通过template标签创建的组件
   		</div>
   	</template>