Vue Component 全局组件、局部组件

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <!-- 调用全局注册的组件 -->
        <button-counter></button-counter>
        <p>----------------------</p>
        <buttonCounter></buttonCounter>

        <box1></box1>
        <button-counter></button-counter>
    </div>
    <p>======================</p>
    <div id="root">
        <button-counter></button-counter>
        <box2></box2>
    </div>
    <script src="js/vue.3.2.2.js"></script>
    <script>
        //注册一个局部组件
        const Counter={
            data(){
                return{
                    count: 0
                }
            },
            template:'<button @click="count++">点{{count}}次</button>'
        }

        const Box={
            components: {
                'button-counter':Counter
            },
            template:'<div style="background-color: red">' +
                    'div_box2' +
                    '<button-counter></button-counter>' +
                    '</div>'
        }

        // 1、创建Vue的实例对象
        const app = Vue.createApp({
            data(){//定义数据
                return {
                    msg:'你好！'
                }
            }
        });
        const root = Vue.createApp({
            data(){//定义数据
                return {
                    msg:'你好2！'
                }
            },
            components:{
                'button-counter':Counter,
                'box2':Box
            }
        });
        <!-- 建议使用这种 -->
        app.component('button-counter',{
            data(){
                return{
                    count: 0
                }
            },
            template:'<button @click="count++">点击{{count}}次</button>'
        });
        <!-- 这种只有脚手架工程开发时才有效 -->
        app.component('buttonCounter',{
            data(){
                return{
                    count2: 0
                }
            },
            template:'<button @click="count2++">点击{{count2}}次</button>'
        });

        app.component('box1',{
            template:'<div style="background-color: red">' +
                    'div_box1' +
                    '<button-counter></button-counter>' +
                    '</div>'
        });


        app.mount('#app');
        root.mount('#root');
    </script>
</body>
</html>

 

posted @ 2021-08-19 22:29  残星  阅读(237)  评论(0)    收藏  举报