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