vue组件和根实例的关系
学vue组件的时候,一直没有弄明白,用Vue.component注册组件的时候,整个component方法单摆浮搁,没有和其他任何Vue实例有关联,想不明白为什么也能修改html内容。在传统思维里,HTML标签我们只有选择器(读)的权限,少有修改(写)的权限,如果思维固化,会导致认为标签里的名称对于我们没有实际意义,尤其div这种空气标签,非常容易会被忽略为不存在,而Vue里,<my-c..
学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标签
更多推荐
所有评论(0)