2.局组件和局部组件 

<body>
    <div id="app">
        <cpn></cpn>
    </div>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script>
    <script>
        const cpnC = Vue.extend({
            template: `
            <div>
                <h5>啦啦啦</h5>
                <p>哈哈嘿嘿lalalalal</p>
            </div>
            `
        })

        // Vue.component('my-cpn', cpnC); // 这是一个全局组件 就是一个页面可以有多个挂载元素  实际开发中一般只有一个挂载元素

        const app = new Vue({
            el: '#app',
            data: {

            },
            components: { // 这是局部组件 定义在vue实例对象里面 注意components 后面有加s 和全局组件有点多不一样
                cpn: cpnC, // 局部组件  实际开发中用的更多
            }

        })
    </script>
</body>

 

posted @ 2020-12-29 15:45  闭上耳朵  阅读(103)  评论(0)    收藏  举报