vue组件和根实例的关系

学vue组件的时候，一直没有弄明白，用Vue.component注册组件的时候，整个component方法单摆浮搁，没有和其他任何Vue实例有关联，想不明白为什么也能修改html内容。

在传统思维里，HTML标签我们只有选择器（读）的权限，少有修改（写）的权限，如果思维固化，会导致认为标签里的名称对于我们没有实际意义，尤其div这种空气标签，非常容易会被忽略为不存在，而Vue里，<my-component></my-component>标签是有用的，不是div那类空架子，而且vue.js里有些操作会和它产生关联：

这里的todo-item标签已经和js有了关联 （请忽略波浪线）  

而在我们的js文件里，先注册一个组件（照着官网教程抄的）

这句语句已经和上一个图的自己写的<todo-item>标签有了关联（现在看不出来）

之后，new一个vue实例

这个app7实例写一个el测试一下就行

此时，全局组件会自动绑定到这个实例里面，也就是el元素#app-7内部有如果有<todo-item>标签，就把这个标签替换为之前Vue.component注册的template；

所以：如果想使用全局组件，

第一步：在html里你需要的位置用组建名写一个空标签（<todo-item></todo-item>）

第二步：在js里注册全局组件（Vue.component（组件名，配置））

第三步：在空标签的父标签new一个vue实例（如示例的#app-7）

完成：如果vue实例所在的标签下有<todo-item></todo-item>标签，默认就会把这个全局组件绑定给这个todo-item标签

最后

以上就是温柔鲜花为你收集整理的vue组件和根实例的关系的全部内容，希望文章能够帮你解决vue组件和根实例的关系所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。