Day15 元件系统

甚麽是元件?
元件(Conponent)是Vue最主要的特性,提供HTML DOM的扩充性,将可以建立根(root)再将元件堆叠上去,有利於人员的开发与维护
当专案架构越大时,我们就需要思考如何将元件拆开与分类。
(图片来源Vue.js)
要在模板中使用这些组件,就需要注册它们,其中又分为global与local两个类型

全域注册
缺点 : 不论是否有用到此元件,都会将它载入,拖慢载入速度
使用vue.component(tagName,option)来注册
以下面的例子来说,它是具有名称可重复使用的,先将此当作创建方法的root

当我想要将这个元件多次重复使用时,只要再HTML上打上简短的程序码,就可以得到我所需要的功能,在HTML上看起来就简洁许多,而其中每个按钮都有自己的count,每次使用此元件都会创造一个新的实例

小提醒 : Data必须是函数
当我们定义并没有直接提供
data : {
count : 0
}
而是
data : function () {
return{
count: 0
}
}
以便每个实例都可以有自己独立的data,所以没有这个规则的话,就会引想到其他按钮的计算,变成共用一个data

区域注册
缺点 : 只能绑定在实体内使用,如果有另一个实体要用,那这个元件就不能共用
如果不需要共用,就可使用区域注册
可以将例子改写成

is属性
is属性可以更改DOM绑定变数,就能依照这个变数名称,寻找组件渲染页面

参考资料: https://book.vue.tw/CH2/2-1-components.html
https://v3.cn.vuejs.org/api/built-in-components.html#component
https://vuejs.org/v2/guide/components.html
https://vuejs.org/v2/guide/components-registration.html