全局组件和局部组件

最新推荐文章于 2024-05-25 12:18:14 发布

spfLinux

最新推荐文章于 2024-05-25 12:18:14 发布

阅读量386

点赞数

分类专栏： vue 文章标签：全局组件和局部组件

vue 专栏收录该内容

35 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
	<div id="example">
		<my-header></my-header>
		<p>{{msg}}</p>
		<my-button></my-button>
		<my-footer></my-footer>
	</div>

	<script type="text/javascript">
		Vue.component('my-footer',{  //必须包在一个容器里，否则会报错
			//全局组件可以包含全局组件，不能包含局部组件，否则会报错
			template:`
				<div>   
					<h2>这是尾部</h2>
					<p>end</p>
					<my-button></my-button>
				</div>
			`
		});

		Vue.component('my-button',{
			template:'<button>按钮</button>'
		});

		new Vue({
			el:'#example',
			data:{
				msg:'VueJS is Awesome'
			},
			components:{
				'my-header':{
					template:'<h1>this is header</h1>'
				}
			}
		});
	</script>
</body>
</html>