4.组件的语法糖注册方式 

<body>
    <div id="app">
        <cpn1></cpn1>
        <cpn2></cpn2>
    </div>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script>
    <script>
        // 组件的语法糖注册方式如下：直接注册组件 把第二个参数的内容传进来
        Vue.component('cpn1', {
            template: `
            <div>
            <h1>那年夏天</h1>
            <p>空气很甜 lalallallal</p>
        </div>
            `
        })
        const app = new Vue({
            el: '#app',
            data: {

            },
            components: {
                cpn2: { // 组件局部的语法糖
                    template: `
                    <div>
            <h1>即使知道这个世界很灰暗</h1>
            <h3>但是还是相信 光会透过裂缝 钻进来</h3>
        </div>
                    `
                }
            }
        })
    </script>
</body>

 

posted @ 2020-12-29 16:11  闭上耳朵  阅读(133)  评论(0)    收藏  举报