全局组件报错

来源：3-1 组件的定义及复用性，局部组件和全局组件（1）

慕工程2099342

2022-04-27

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id='mount'></div>
		<script>
			const app = Vue.createApp({
				template:`
					<myname/>
				`
//				为什么这样mount会报错
//				浏览器报错内容:
//				Uncaught TypeError: app.component is not a function
			}).mount('#mount');
			
			app.component('myname',{
				data(){
					return {
						myData:'this is myData'
					}
				},
				template:`
					<p>my is child</p>
					<p>{{myData}}</p>
				`
			});
//			这样不报错
//			这样不报错
//			这样不报错
//			两者之间的区别?????????????
//			app.mount('#mount');
		</script>
	</body>
</html>

写回答

1回答