vue.js全局组件

最新推荐文章于 2024-09-26 10:41:08 发布

虬川候

最新推荐文章于 2024-09-26 10:41:08 发布

阅读量665

点赞数

CC 4.0 BY-SA版权

分类专栏： vue.js 文章标签： vue.js 组件全局组件框架

本文链接：https://blog.youkuaiyun.com/qq_39383675/article/details/83548736

vue.js 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了Vue中全局组件的两种创建方法，包括直接在HTML中使用模板和内联定义组件的方式，通过实例演示如何在不同实例中重复使用同一组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

全局组件
可在任何实例的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.youkuaiyun.com/qq_39383675/article/category/8256374