谷粒商城34 - 前端基础 VUE-组件化基础

组件化介绍

使用组件的注意事项

全局声明组件

全局声明注册一个组件的demo代码如下. 使用Vue.component("counter", 注意组件中的data,不能用对象, 而是方法的声明. 声明了组件后, 可以复用多次 , 直接写组件的名称即可, 如下的

    
        我被点击了 {{count}} 次

        
        
        
        
        
    
    


    
        //1、全局声明注册一个组件
        Vue.component("counter", {
            template: `我被点击了 {{count}} 次`,
            data() {
                return {
                    count: 1
                }
            }
        });

        new Vue({
            el: "#app",
            data: {
                count: 1
            }
        })
    

如下 所示, 每一个按钮, 都可以多次点击 .

局部声明组件

使用const 声明局部组件. 对局部组件的引用

components: {
                'button-counter': buttonCounter
            }

页面上的使用方法

    
         
         
    
    


    
        //2、局部声明一个组件
        const buttonCounter = {
            template: `我被点击了 {{count}} 次~~~`,
            data() {
                return {
                    count: 1
                }
            }
        };

        new Vue({
            el: "#app",
            data: {
                count: 1
            }
            ,
            components: {
                'button-counter': buttonCounter
            }
        })
    

页面效果如下