vue组件与vue实例的关系

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

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

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

复制代码

从上面的代码可以看出，vue构造和vue组件所需的部分初始化结构参数是一样的，这意味着vue实例可以直接跳过vue组件直接使用vue构造对自身组件初始化，也就是vue构造->vue实例，下面请看三种用法的关联性。

vue构造

特点：

1.只能通过自身初始化结构

使用范围：

1.挂载在某元素下

2.被Vue实例的components引用

3.Vue.component组件引用

"app2">

复制代码

运行结果：

我是构造函数创建：自身参数：a|外部传参：Vue.extend。
复制代码

vue组件

特点：

1.可通过自身初始化组件结构

2.可通过引入Vue.extend初始化组件结构

3.可通过第三方模板temple.html初始化组件结构

使用范围：

任何已被vue初始化过的元素内

"app3">
	"vparam">
	"vparam">
	"vparam">

 

复制代码

运行结果：

我是构造函数创建：自身参数：a|外部传参：Vue.component
我是vue.component创建 自身参数：a|外部传参：Vue.component
我是导入模板 自身参数：a|外部入参：Vue.component
复制代码

vue实例

（注）this.$options.key表示其自定义属性值,this.$??表示系统属性值,如this.$el

特点：

1.可以通过自身components引用Vue.extend构造,通过自身data向构造传参

2.可以通过自身components引用组件模板，通过自身data向组件传参

使用范围：

1.仅限于自身

"app1">
	
	"msg">

 

 

复制代码

运行结果：

这里是子组件1
我是构造函数创建：自身参数：a|外部传参：vue实例参数复制代码

  本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。 对web开发技术感兴趣的同学，欢迎加入Q群：864305860，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。 最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。

转载于:https://juejin.im/post/5bbb21f45188255c2f423464