全局组件、局部组件

 

定义全局组件（可以在多个vue实例中使用）

<script>
        const cpn = Vue.extend({  //①创建组件构造器
            template:`
                <div>
                    <h2>我是标题</h2>
                    <p>我是内容哈哈哈</p>
                <div>
            `
        });
        Vue.component('cpn',cpn);//②注册组件

        new Vue({
            el:'#app',
            data:{
                message:'hello world'

            },

        })
    </script>

 

语法糖

<body>
    <div id="app">
        <cpn></cpn>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('cpn',{ 
            template:`
                <div>
                    <h2>我是标题</h2>
                    <p>我是内容哈哈哈</p>
                <div>
            `
        });

        new Vue({
            el:'#app',
            data:{
                message:'hello world'

            },

        })
    </script>
</body>

 

<body>
    <div id="app">
        <cpn></cpn>
        <cpn2></cpn2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('cpn',{  //父组件
            template:`
                <div>
                    <h2>我是标题</h2>
                    <p>我是内容哈哈哈</p>
                <div>
            `
        });
        const cp = {            
            template:`
                <div>
                    <h2>我是标题2</h2>
                    <p>我是内容呵呵呵</p>
                <div>
            `
        }

        new Vue({
            el:'#app',
            data:{
                message:'hello world'
            },
            components:{  //子组件
                cpn2:cp
            }

        })
    </script>
</body>

 

posted @ 2022-02-21 20:10  iTao0128  阅读(322)  评论(0)    收藏  举报