04、Vue-局部组件的创建

04、Vue-局部组件的创建

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>行找的皮卡丘</title>
	</head>
	<body>
		<div id="app"></div>
	</body>
	<script src="js/vue.min.js" type="text/javascript">

	</script>
	<script type="text/javascript">
		// 1、声明局部入口组件
		var App = {
			data() {
				return {

				}
			},
			template: `<div>我是入口组件</div>`
		};

		new Vue({
			el: "#app",
			data() {
				return {

				}
			},

			// 2、挂载子组件 可以挂载多个
			components: {
				App: App,
			},

			// 3、父组件直接使用
			template: `
				<App/>
			
			`,
		});
	</script>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_44908159/article/details/107827561