VUE的组件化

VUE的组件化

什么是VUE的组件化

组件化是VUE的精髓，VUE及时由一个一个组件构成的。VUE的组件化涉及到的内容非常多。例如如页面，页面就是由一个个组件构成的，比如导航，列表，弹框，搜索框和下拉框等等…
页面只不过是这些组件的容器，组件自由组合形成功能完善的界面，当不需要某个组件的时候，或者想要替换某个组件时，可以随时进行替换和删除，这些操作都不会影响到整个应用程序的运行。

VUE组件化的好处

（1）实现了html的封装和重用，在构建单页面应用方面有这独一无二的优势。
（2）大大提高了开发效率，并且使得测试等业务变得更加轻松了。
（3）有利于开发者使用小型，独立和通常可服用的组件构建大型应用。

VUE组件化实现TodoList

全局组件化实现TodoList

代码如下：

注意事项：

（1）在创建组件的时候，命名为TodoItem，而引用使用该组件的时候却是，这里是因为VUE内部的规定写法，把大写的字母改为小写，并且在最后一个大写和前面一个小写加上符号“-”。
（2）v-bind:content用于绑定数据，这里是绑定数组中的每项数据item，props:[‘content’]用于接收v-bind:content的数据。（这种传值方式是父组件向子组件传值）

局部组件化实现TodoList

代码如下：

注意事项：

（1）template指的是子组件的模板。
（2）与全局组件化不同的是，全局注册主键的时候只需要使用Vue.component()就已经注册了组件，而局部需要在new Vue({})中使用components进行注册组件，才可以进行正常使用。

总结

VUE的组件化真的特别好用，只需要写好一个template模板，当需要使用它的时候，就可以轻松地引用它（多处引用），这很有利于大大提高开发效率。