25 . Vue 注册组件语法糖

貌似在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模板代码 分离写