vue.js的全局组件和局部组件

最新推荐文章于 2024-04-22 21:19:43 发布

k_wenhua0321

最新推荐文章于 2024-04-22 21:19:43 发布

阅读量144

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/k_wenhua0321/article/details/103591083

版权

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

一、全局组件

注册一个简单的全局组件，并且可以使用它，代码示例如下：

<div id="example">
	<didi-component></didi-component>
</div>
<script src="vue.js"></script>
<script>
	var DIDIComponent=Vue.extend({
			template:'<div>A custom component!</div>'
		})
		//注册
		Vue.component('didi-component',DIDIComponent)
		//创建实例
		new Vue({
			el:'#example'
		})
</script>

所有的实例都可以使用全局组件，注意要确保在初始化根实例之前注册了组件。

二、局部组件

不需要每个组件都全部注册，可以让组件只能用在其他组件内。代码示例如下：

<div id="example">
	<didi-component></didi-component>
</div>
<script src="vue.js"></script>
<script>
	var Child=Vue.extend({
		template:'<div> i am child </div>',
		replace:true
		})
	var Parent=Vue.extend({
		template:'<p>i am parent</p><br/><child></child>',
		components:{
		//<didi-component>只能用在父组件模板内
		'child':Child
    		}
		})
		//创建实根
		new Vue({
			el:'#example',
			components:{
				'didi-component':Parent
			}
		})
</script>