• 當前位置:首頁 > IT技術 > 其他 > 正文

    25 . Vue 注冊組件語法糖
    2022-05-31 17:16:21

    貌似在VUE2.x之后,VUE就不和以前那樣寫了, 用語法糖:

    把 vue.exdents({template:xxx}) 簡化為: 一個對象的形式:{template:xxx} 【其實內部也是調用vue.exdents() 這個方法的】

    ?

    代碼:

    <div?id="app">
    ????<m-cpn></m-cpn>
    </div>

    <script?src="js/vue.js"></script>
    <script?>

    ????//語法糖寫組件?直接省去vue.extends()?這個方法?【這里相當于直接注冊了全局組件】
    ????Vue.component('m-cpn',{
    ????????template:
    ????????????`
    ????????????<div><h3>模塊開發語法糖?-?自定義組件</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模板代碼 分離寫

    ?


    作者:??咸瑜???


    本文摘自 :https://blog.51cto.com/u

    開通會員,享受整站包年服務
    国产呦精品一区二区三区网站|久久www免费人咸|精品无码人妻一区二区|久99久热只有精品国产15|中文字幕亚洲无线码