vue 全局/局部组件

最新推荐文章于 2024-07-27 07:15:00 发布

心郎

最新推荐文章于 2024-07-27 07:15:00 发布

阅读量6.7k

点赞数 1

本文链接：https://blog.csdn.net/u011301203/article/details/65445280

版权

本文详细介绍了Vue中全局和局部组件的注册与使用。通过示例展示了全局组件的简写方式以及通过Vue.extend创建并注册组件的方法。同时，文章还探讨了局部组件的注册，并解释了如何在Vue实例中使用components属性进行组件注册。文章最后讨论了父子组件间的数据传递，强调了props用于从父组件向子组件传递数据，以及子组件通过events向父组件发送消息的重要性。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		
		<!-- 全局组件简写-->
	    <div id="example1">
			<my-compoent></my-compoent>
		</div>
		<script>
			Vue.component('my-compoent',{
				template:'<div>测试1</div>'
			})
			
			new Vue({
				el:'#example1'
			})
		</script>
		
		
		<!-- 注册全局组件-->
		<div id="example2">
			<my-compoent1></my-compoent1>
		</div>
		<script>
			//创建一个组件构造器
			var myComponent = Vue.extend({
				template:'<div> 测试2</div>'
			})
			//注册全局组件： (z组件名称 组件构造器)
			//Vue.component(tagName,options)
			Vue.component('my-compoent1',myComponent)
			
			new Vue({
				el:'#example2'
			})
		</scrip