Vue Component 标签

Posted 纸上得来终觉浅，绝知此事要躬行

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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标签 -->
<!--    <script type="text/template" id="button_counter">-->
<!--        <button @click="count++">点{{count}}次</button>-->
<!--    </script>-->
<!--    <script type="text/template" id="div_box2">-->
<!--        <div style="background-color: red">div_box2<button-counter></button-counter></div>-->
<!--    </script>-->
    <!-- template标签 -->
    <template id="button_counter">
        <button @click="count++">点{{count}}次</button>
    </template>
    <template id="div_box2">-->
        <div style="background-color: red">div_box2<button-counter></button-counter></div>
    </template>
    <script src="js/vue.3.2.2.js"></script>
    <script>
        //注册一个局部组件
        const Counter={
            data(){
                return{
                    count: 0
                }
            },
            template:\'#button_counter\'
        }

        const Box={
            components: {
                \'button-counter\':Counter
            },
            template:\'#div_box2\'
        }

        // 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>

 

以上是关于Vue Component 标签的主要内容，如果未能解决你的问题，请参考以下文章

Vue组件component标签的使用

解决vue的component标签渲染问题的方法

Vue Component 标签

Vue内置的Component标签用于动态切换组件

Vue组件之全局组件与局部组件

Vue组件之全局组件与局部组件