vue.js全局组件

全局组件
可在任何实例的vm里调用

方法一
这个好用,方便.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="div">
			<!--调用组件-->
			<demo></demo>
			<demo></demo>
			<demo></demo>
		</div>
		
		<div id="div2">
			<demo></demo>
			<demo></demo>
			<demo></demo>
		</div>
		<!--编写组件-->
		<template id="tmp">
			<!--如果想在html结构中，写入多个标签，外层必须包裹容器-->
			<div>
				<p>{{ msg }}</p>
				<h1 @click="fn()">{{ name }}</h1>
			</div>
		</template>
	</body>
</html>
<script type="text/javascript">
//	实例组件并取名
	Vue.component('demo',{
//		绑定组件
		template:"#tmp",
//		设置变量
		data:function(){
			return{
				msg:'hello',
				name:'leition'
			}
		},
//		设置方法
		methods:{
			fn:function(){
				alert('OK!')
			}
		}
	});
	var vm = new Vue({
		el:'#div'
	})
	var vm2 = new Vue({
		el:'#div2'
	})
</script>

方法二
这个蠢,自己试试就知道了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="div">
			<demo></demo>
		</div>
	</body>
</html>
<script type="text/javascript">
	Vue.component('demo',{
		template:"<div><p>{{ msg }}</p><h1 @click='fn()'>{{ name }}</h1></div>",
		data:function(){
			return {
				msg: 'hello',
				name: 'leition'
			}
		},
		methods:{
			fn:function(){
				alert('lala');
			}
		}	
	});
	var vm = new Vue({
		el:'#div'
	})
</script>

组件练习地址：https://blog.csdn.net/qq_39383675/article/category/8256374

猜你喜欢