谷粒商城day27 -Vue-组件化

我才是真的封不觉

于 2020-09-02 22:43:53 发布

阅读量111

点赞数

分类专栏：谷粒商城文章标签： Vue-组件化

本文链接：https://blog.youkuaiyun.com/JavaCoder_juejue/article/details/108372075

版权

谷粒商城专栏收录该内容

150 篇文章

订阅专栏

本文通过一个具体的Vue实例，展示了全局组件与局部组件的定义和使用方式。全局组件可在整个应用中复用，而局部组件仅在当前Vue实例中可用。通过对比，读者可以深入理解两种组件的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

全局组件与局部组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
    
</head>
<body >
        <div id = "app">
            <h1>{{name}} 你好啊！</h1>
            <buttonadd></buttonadd>
        </br>
            <but_add></but_add>
           
        </div>
       
        

        <script>
            //全局组件
            Vue.component("but_add",{
                template:"<button @click = 'num++'  >{{num}}</button>",
                data(){
                    return {
                        num:1
                    }
                }
            });

            //局部组件
            const butaddzz = {
                template:"<button @click = 'num++'  >{{num}}</button>",
                data(){
                    return {
                        num:1
                    }
                }
            };
 
            new Vue({
                el:"#app",
                data:{
                    num:1
                },
                components:{
                    'buttonadd':butaddzz
                }
            });
        </script>
</body>
</html>