这样在 app2 作用域内是无法识别到在 app 作用域注册的组件 zi-comp
global_register_comp
关于组件中 data 的属性
这里有一个我们需要注意的,也是我们对 vue 设计理念有点 confusing 的。data 属性值是一个函数返回一个对象,而不是直接接收一个对象作为 data 的属性值。
Document
{{msg}}
在组件中对 data 属性
data: function () {
return {
msg: "A custom component of Vue"
}
}
为什么会这样,可以简单思考一下,因为在 javascript 语言中没有大括号的作用域,最小作用域范围就是函数,如果没有通过 function 来限制数据 data 作用范围,data 就会把全局 data 覆盖掉,就这么简单。
大家可以通过运行下面的代码来观察问题,以及我们为什么要在 data 属性通过一个函数返回值来给 data 属性赋值的原因。
Document
通过修改 zi-comp 的 data 属性,返回一个对象,这样 count 属性就不会覆盖外面属性,这时的 count 只属于该 zi-comp 组件实例化对象的 count。通过这个示例我想大家可能对为什么在 vue 的组件定义数据 data 属性时,需要提供函数然后在其中将数据对象返回原因了吧。
Vue.component('zi-comp', {
template: '
{{count}}
',
data: function () {
return {
count:0
};
}
});
模板文件
在 vue 中,避免大家在 vue 对象中的 template 写一些复杂 html 结构,vue 和其他框架一样提供在 vue 外部写 html 模板,然后在 vue 对象通过模板 id 来引用模板的方式来写模板。