Vue2组件总结（组件相当于html中可以通过函数来操作，很方便了！）

曾经终败给现在 2021-09-17 15:24 159阅读 0赞

//全局组件    
    <my-component-kirin-g :i="name" :j=2></my-component-kirin-g>
        //template标签，加载时不会显示，js调用时才可以显示！
        <template id="kirin_template">
            <p><button>{
       {component}}</button></p>
        </template>
       
        <div class="container" v-cloak >
            // 局部组件，.container内部！
            <my-component-kirin></my-component-kirin>
    
         </div>

### **组件（html函数） ：全局组件（全局函数）和局部组件（局部函数）** ###

### **注：每个组件（相当于函数）有自己独立的作用域数据，和函数的原理一样！** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70 1][]

//全局组件定义的案例：  
    Vue.component("my-component-kirin-g", Vue.extend({
            //在自定义组件中，data必须是函数,最终返回一个对象（官方有说明）
            data:function(...args) {
                console.log(args);
                return {
                    component:"这是一个全局组件！"
                }
            },
            template: "#kirin_template",
        }))

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70 2][]

const app =  new Vue({
            el:".container",
            data:{
                username:"用户名",
                },
       
            },
            methods: {
                show:function() {
                    console.log("show");
                }
            },
            components:{
                "my-component-kirin":{
                    //在自定义组件中，data必须是函数,最终返回一个对象（官方有说明）
                    data:function(){
                        return {
                            component:"这是一个局部组件模板",
                        }
                    },
                    //template使用html自带的模板标签！
                    template: "#kirin_template",
                },
            }
    });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70]: /images/20210812/b93f9c3a5eee43e8ad39255224c426c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70 1]: /images/20210812/4e6bdc5df1fb4beaba8240f4bf69ad13.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70 2]: /images/20210812/f47fdfe54ee44d509782c89afe621e1d.png