从学vue.js开始，我就喜欢上了它的组件概念，就是把大工程变成小模块，这就像拼图一样简单易懂，同时也加速了开发过程。所以今天咱就来讲讲怎样利用Vue.extend做局部组件，再分享一下我自己用过的一些方法和心得体会。
导入Vue库
来，第一步，就是给项目加上Vue这个好东西。别以为简单，其实重要着！咋整？直接粘过来CDN上的链接，超级省事儿连工具都不用装！弄完之后，真的会感慨，咱现在的网技术可真牛，一个小链接就能享受这么好用的Vue框架。
创建Vue实例
下面，咱们搞个Vue实例，加上需要的东西，让它来搞定我们的程序。这就好像是小船有了锚，没锚的话，小船咋能撑住？
使用Vue.extend函数创建组件
用Vue.extend弄组件真是太有趣了！首先确定要做什么类型的组件，再根据要求设定好各项参数，交给Vue.extend处理就能完成。感觉就像把心中所想变成现实，成就感爆棚~
new Vue({
el: '#app'
});
将组件注册到Vue实例中
搞定组件后别忘了放进Vue里面！这可是相当重要，就像是你收拾好你亲手做的小玩意儿，等着别人来观赏一样。这个过程真有点像收藏家，简单一按，那个漂亮的小物件（组件）就稳妥放进了“库房”（Vue实例）。
var MyComponent = Vue.extend({
template: 'This is my component!
'
});
在模板中使用组件
终于搞定！把新建的组件添加到Vue实例模板里，感觉棒极了。每当看到自己做的东西实实在在地展示在页面上时，那种兴奋难以言表，就好像看着孩子蹒跚学步一样，幸福感满满！
new Vue({
el: '#app',
components: {
'my-component': MyComponent
}
});
注意事项：组件命名规则
给每个Vue组件起个啥名字？小写字母加大横杆儿，既直观又好看！大家好记，咱们也好交流哇。
注意事项：模板的使用
不管是字符串还是DOM元素，都可以用来做组件模板。不过对我来说，还是喜欢用字符串，随随便便就改了！当然想做好这事儿还有点门道，需要懂些HTML和Vue模板的规则~
var MyComponent = Vue.extend({ template: 'This is my component!
' }); new Vue({ el: '#app', components: { 'my-component': MyComponent } });
注意事项：组件选项的管理
今天就来聊聊我们组件里几个重要的东西——data、methods、computed、watch。给它们设置参数可得费点心，这样才能保证整个组件工作起来又快又好懂易维护。
总结与展望
Vue.extend真的好棒！教会了我搞局部组件，还有组件开发的好处，代码简单明了，复用起来更轻松。希望对学Vue的你们有帮助，组件开发愉快！最后问问，你们用Vue.extend做组件时遇见过哪些奇妙又难搞定的事儿吗？来评论区分享，记得点赞，也可以分享给其他人看看！
评论0