貌似在VUE2.x之后，VUE就不和以前那樣寫了， 用語法糖：
把 vue.exdents({template:xxx}) 簡化為： 一個(gè)對(duì)象的形式：｛template：xxx｝ 【其實(shí)內(nèi)部也是調(diào)用vue.exdents（） 這個(gè)方法的】
?
代碼：
<div?id="app">
????<m-cpn></m-cpn>
</div>
<script?src="js/vue.js"></script>
<script?>
????//語法糖寫組件?直接省去vue.extends()?這個(gè)方法?【這里相當(dāng)于直接注冊(cè)了全局組件】
????Vue.component('m-cpn',{
????????template:
????????????`
????????????<div><h3>模塊開發(fā)語法糖?-?自定義組件</h3></div>
????????????`
????})
????const?app?=?new?Vue({
????????el:"#app"
????})
</script>
?
看出來了吧 直接對(duì)象就可以代替Vue.exdents() ，所以無論是注冊(cè)全局還是局部組件 都很方便。
?
語法糖寫組件 【父組件和子組件 （局部）】：
?
<div?id="app">
????<parent></parent>
</div>
<script?src="js/vue.js"></script>
<script>
????const?app?=?new?Vue({
????????el:?"#app",
????????components:?{
????????????"parent":?{
????????????????template:?`
??????????????????<div>
??????????????????<h1>我是parent</h1>
??????????????????<child1></child1>
??????????????????<child2></child2>
??????????????????</div>`,
????????????????components:?{
????????????????????"child1":?{
????????????????????????template:?`?<div>
????????????????????????????????????<hr>
????????????????????????????????????<h2>我是child1</h2>
????????????????????????????????????</div>`
????????????????????},
????????????????????"child2":?{
????????????????????????template:?`??????????<div>
?????????????????????????????????????????????<hr>
?????????????????????????????????????????????<h2>我是child22</h2>
?????????????????????????????????????????????</div>`
????????????????????}
????????????????}
????????????}
????????}
????})
</script>
有點(diǎn)亂 但是呢?。。?！? 后面可以吧這些template模板代碼 分離寫
?
作者：??咸瑜???
APP 