持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情
本文为基础入门文章及部门个人总结内容，前端大佬请绕行
俗话说，古有孔乙己茴香豆的茴有几种写法，今有博主我组件模板有几种写法。---- 开个玩笑
言归正传，作为一个后端，工作中虽然很少写vue，更谈不上玩各种组件的，但还是有机会看不少别人写的vue代码的，时间久了，还是能看出来点门道
组件化开发，其实对每一个前端，尤其是从jQuery时代过来的从业者而言，开始接触组件，其实不太容易上手，但是一旦掌握了技巧，开发简直就像变成了搭积木一样手到擒来，轻而易举。
但是要封装一个好的组件，如何抽离一个组件，使得业务复杂度分离或者说更好的复用组件，也不是一件容易的事，这个还是需要大量的实践，慢慢才能掌握其中的技巧，这其中涉及到的组件间传值，继承问题，组件间的事件触发等等，都需要做很好的处理，否则组件将不成组件。
本文如题，不会教大家如何很好的封装一个组件，技巧还是需要自行摸索，我只会带你入门，讲述几个我见过的几种组件形式。
字符串拼接
模板字符串：直接写到<template>中
<div id="app">
<h-son></h-son>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
},
components:{
hSon:{ //模板字符串
template:`<p>我是模板1中内容</p>`
}
}
});
</script>
这种方式，是最基础的组件模板了！
基本上每个刚接触vue的人最开始都接触过这种写法。
变量法
也可以将模板赋值到变量中，然后再绑定
<div id="app">
<h-son></h-son>
</div>
<template id="son"><!-- 子组件模板 -->
<div>子组件中内容啊</div>
</template>
<script>
var hSon = { //注意：此变量必须放在vm上面
template:'#son'
}
var vm = new Vue({
el: '#app',
data: {
},
components:{
hSon
}
});
</script>
这种方式，相当于用变量做中间人，但是变量必须写到Vue创建之前，否则会报错如下
script标签
跟上面方法很像，只是将template标签换成了script标签了
script标签中的type属性必须要写，否则编译器无法识别
<div id="app">
<h-son></h-son>
</div>
<script type="text/template" id="son"> <!-- 子组件模板: type必须写 -->
<div>子组件中内容啊</div>
</script>
<script>
var hSon = {
template:'#son'
}
var vm = new Vue({
el: '#app',
data: {
},
components:{
hSon
}
});
</script>
自定义元素
将组件名作为自定义元素标签名直接使用
// 自定义元素标签名
components:{
'sss':hSon
}
//父组件中使用
<div id="app">
<sss></sss>
</div>
这种方式其实是最常用的了，一般这个自定义标签名称会起名比较有意义的，这样无论哪个开发者都可以 看名知意。
从我个人角度理解：其实组件复用仅仅是一方面，还有一个很大原因是，当一个页面业务功能很复杂时，如果能把复杂的逻辑拆解，然后用组件抽离，再拼接起来，那页面看起来不仅简洁清爽，维护起来也相当简单，如果再遇到功能扩展也变得容易很多。这才是组件的最大好处。
文末总结
师傅领进门，修行在个人。
在编程行业这句话再合适不过了。
文档领进门，修行在练习。
至于学的精不精，就看你舍不舍得投入时间研究它了
