vue组件与vue实例的关系

转载

于 2018-10-08 09:23:46 发布 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5bbb21f45188255c2f423464

文章标签：

#javascript #ViewUI

本文探讨了Vue构造、Vue组件和Vue实例之间的关系，类似于Java的继承概念。Vue构造用于创建基础结构，组件在此基础上扩展，而实例则可共用组件。Vue构造适用于挂载元素或被引用，组件支持多种初始化方式并在已初始化的Vue环境中使用，而实例则主要用于自身组件和数据的管理。文章还提到了不同类型的使用范围和特性，并推荐了一个Web开发技术学习群。

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

vue构造、vue组件和vue实例这三个是不同的概念，它们的关系有点类似于Java的继承概念：

关系：vue构造->vue组件->vue实例

也就是说不同的vue组件可以共用同一个vue构造，不同的vue实例可以共用同一个vue组件。在大型项目中，用过java开发的都知道，继承是非常重要的，前端也一样。我们先看看他们之间的实现代码区别：

<script>
	//vue构造
	Vue.extend({
		props: [],
		data: function() {
			return {}
		},
		template: ""
 
	});
	
	//vue组件
	Vue.component("mycomponent", {
		props: [],
		data: function() {
			return {}
		},
		template: ""
	});
	
	//vue实例
	new Vue({
		el: "",
		data: {}
	});
</script>
复制