2.4Java全栈开发前端+后端（全栈工程师进阶之路）-前端框架VUE3-基础-Vue组件

初识Vue组件

Vue中的组件是页面中的一部分，通过层层拼装，最终形成了一个完整的组件。这也是目前前端最流行的开发方

式。下面是Vue3官方给出的一张图，通过图片能清楚的了解到什么是Vue中的组件。

图的左边是一个网页，网页分为了头部、左侧主体和右侧边栏。这时候你用组件的概念，就可以先把这个网页分为

三个大的组件，分别是头部、左侧和右侧。然后再根据每个大组件里的内容和功能，作更加详细的组件划分。

这样就可以把一个复杂的大页面，分解成一个个可以复用的小页面。

Vue中的组件可以分为：根组件、全局组件、局部组件。

根组件

<div id="app">

</div>

<script src="../js/vue3.js"></script>
<script>
    let app = Vue.createApp({});     //创建Vue实例
    let vm = app.mount('#app');      //根组件

    //Vue.createApp({}).mount('#app');
</script>

Vue.createApp({}) 实际是建立一个Vue实例。

Vue.createApp({}).mount('#app') 将Vue的实例挂载到一个DOM节点上，就成为一个根组件。

全局组件

直接挂载到Vue实例上的组件就是一个全局组件。全局组件可以应用在任何一个根组件中。

<div id="app1">
        <h3>app1</h3>
        <mycomponent></mycomponent>
        <mycomponent></mycomponent>
        <mycomponent></mycomponent>
    </div>

    <div id="app2">
        <h3>app2</h3>
        <mycomponent></mycomponent>
        <mycomponent></mycomponent>
        <mycomponent></mycomponent>
    </div>

    <script src="../js/vue3.js"></script>
    <script>
        let app = Vue.createApp({});     //创建Vue实例
        //在Vue实例上创建一个mycomponent全局组件
        app.component('mycomponent',{
            template:'<p>我是全局组件</p>'
        });
        //全局组件可以应用在任何一个根组件中 
        //app.mount('#app1'); 
        //let vm = app.mount('#app1');      //根组件
        let vm = app.mount('#app2');      //根组件
    </script>

使用vue.component()注册组件，需要提供2个参数：组件的标签名和组件构造器。组件构造器中的

template中设置组件的html模板。

组件中的内容

因为组件是可复用的vue实例，所以它们也能有data、computed、watch、methods以及生命周期钩子等。

<div id="app">
    <mycomponent></mycomponent>
</div>
<script src="../js/vue3.js"></script>
<script>
    let app = Vue.createApp({});     //创建Vue实例

    app.component('mycomponent',{
        template:`<div>
                      <p>我是全局组件。 {{num}}</p>
                      <button @click="add">加</button>
                      <button @click="sub">减</button>
                  </div>`,
        data(){
            return {
                num: 10
            }
        },
        methods:{
            add(){
                this.num++;
            },
            sub(){
                this.num--;
            }
        }
    });

    let vm = app.mount('#app');      //根组件
</script>

组件模板的内容，可以写在一对反引号中（``），这样就可以不使用字符串拼接的形式了。

局部组件

全局组件可以在根组件的任何地方使用。

但一旦定义了全局组件，就会占用系统资源。因为即使是你并不使用某个组件，它仍然会被包含在最终的构建结果中。这就造成了用户下载的JavaScript的无谓的增加。

声明在根组件上的组件就是一个局部组件。局部组件只能应用在根组件中。而且，局部组件只有在使用时才会耗费系统资源。

<div id="app">
    <mycomponent></mycomponent>
</div>
<script src="../js/vue3.js"></script>
<script>
    Vue.createApp({
        data(){
            return {}
        },
        components:{
            mycomponent:{
                template:`
                <div> 
                    <h3>我是局部组件</h3> 
                    {{num}} <button @click="add">加</button> 
                </div>`,
                data(){
                    return {
                        num: 100
                    }
                },
                methods:{
                    add(){
                        this.num++;
                    }
                }
            }
        }
    }).mount('#app');
</script>

组件模板

如果组件中的template内容过多，那么可以使用组件模板来声明template中的内容。

<div id="app">
    <mycomponent></mycomponent>
    <!--组件之间相互独立-->
    <mycomponent></mycomponent>
</div>
<!-- 组件模板 -->
<template id="mytemplate">
    <div>
        <p>我是局部组件</p>
        <div>hello world!</div>
        {{num}}
        <button @click="add">加</button>
    </div>
</template>

<script src="../js/vue3.js"></script>
<script>
    Vue.createApp({
        data(){
            return {}
        },
        components:{
            mycomponent:{
                template:'#mytemplate',
                data(){
                    return {
                        num: 100
                    }
                },
                methods:{
                    add(){
                        this.num++;
                    }
                }
            }
        }
    }).mount('#app');
</script>

父子组件

当我们继续在组件中写组件，形成组件嵌套的时候，就是我们所说的父子组件了。

<div id="app">
    <mycomponent></mycomponent>
</div>
<template id="mytemplate">
    <div>
        <p>我是父组件</p>
        <!-- 在父组件中使用子组件 -->
        <subcomponent></subcomponent>
    </div>
</template>

<script src="../js/vue3.js"></script>
<script>
    Vue.createApp({
        data(){
            return {}
        },
        components:{
            mycomponent:{
                template:'#mytemplate',
                components:{  //声明子组件 
                    subcomponent:{
                        template:`<div>我是子组件</div>`
                    }
                }
            }
        }
    }).mount('#app');
</script>

组件之间的通信

组件与组件之间是可以互相通信的。包括父子组件之间、兄弟组件之间等等，都可以互相通信。下面只讨论父子组件之间通信问题。

子组件获取父组件数据

数据传递选项prop

在vue中，组件实例的作用域是孤立的，默认情况下，父子组件的数据是不能共享的，也就是说，子组件是不能直接访问父组件的数据的。为此，vue给我们提供了一个数据传递的选项prop，用来将父组件的数据传递给子组件。

具体使用如下：

<div id="app">
    <mycomponent></mycomponent>
</div>
<template id="mytemplate">
    <div>
        <p>我是父组件</p>
        <!-- 在父组件中使用子组件 --> 
        <subcomponent :msg="id" ></subcomponent>
    </div>
</template>

<script src="../js/vue3.js"></script>
<script>
    Vue.createApp({
        components:{
            mycomponent:{
                template:'#mytemplate',
                data(){
                    return {
                        id:100
                    }
                },
                components:{        //声明子组件 
                    subcomponent:{
                        template:`<div>我是子组件，我能获取父组件传递的数据：{{msg}}</div>`,
                        props: ['msg']
                    }
                }
            }
        }
    }).mount('#app');
</script>

上面实例中，子组件获取父组件传递的数据的步骤为：

在子组件标签中，声明 msg 属性，属性值即为父组件向子组件传递的值。
在子组件中，使用props选项，声明接收父组件向子组件传递值的载体，即 ‘msg’ 。
子组件中就可以使用 msg 获取父组件向子组件传递的值了。

也可以使用 v-bind 绑定子组件标签属性，这样就可以将父组件data数据传递个子组件了。

<div id="app">
    <mycomponent></mycomponent>
</div>
<template id="mytemplate">
    <div>
        <p>我是父组件</p>
        <!-- 在父组件中使用子组件 --> 
        <subcomponent :msg="id" ></subcomponent>
    </div>
</template>

<script src="../js/vue3.js"></script>
<script>
    Vue.createApp({
        components:{
            mycomponent:{
                template:'#mytemplate',
                data(){
                    return {
                        id:100
                    }
                },
                components:{            //声明子组件
                    subcomponent:{
                        template:`<div>我是子组件，我能获取父组件传递的数据：{{msg}}</div>`,
                        props: ['msg']
                    }
                }
            }
        }
    }).mount('#app');
</script>

传值校验

我们希望组件之间传递数据时，可以对数据的类型、是否必填等进行校验，这就是参数校验功能。

只要将 props 采用对象形式就可以实现参数校验：

components:{ //声明子组件 
    subcomponents:{ 
            template:`<div>我是子组件，我能获取父组件传递的数据：{{msg}}</div>`, 
                props:{ 
                    msg:{ 
                        type:String, 
                        required: true 
                    } 
            //或者简写 
            //msg:String 
        } 
    } 
}

完整：

<div id="app">
    <mycomponent></mycomponent>
</div>

<template id="mytemplate">
    <div>
        <p>我是父组件</p>
        <subcomponent :msg="id" ></subcomponent>
    </div>
</template>

<script src="../js/vue3.js"></script>
<script>
    Vue.createApp({
        data(){
            return {}
        },
        components:{
            mycomponent:{
                template:'#mytemplate',
                data(){
                    return {
                        id:100
                    }
                },
                components:{
                    subcomponent:{
                        template:`<div>我是子组件，我接受父组件传值：{{msg+1}} {{title}}</div>`,
                        props: {
                            msg:{
                                type: Number
                            },
                            title:{
                                type: String,
                                required: true
                            }
                        }
                    }
                }
            }
        }
    }).mount('#app');
</script>

type：表示参数类型。值：String、Boolean、Array、Object、Function、Symbol

required：表示是否必填。值：true、false

单向数据流

父组件向子组件传递数据是单向的。也就是说：子组件可以接收并使用父组件传递过来的数据，但子组件不能修改此数据。

<div id="app">
    <mycomponent></mycomponent>
</div>
<template id="mytemplate">
    <div>
        <p>我是父组件</p>
        <subcomponent :msg="id" ></subcomponent>
    </div>
</template>
<script src="../js/vue3.js"></script>
<script>
    Vue.createApp({
        data(){
            return {}
        },
        components:{
            mycomponent:{
                template:'#mytemplate',
                data(){
                    return {
                        id:100
                    }
                },
                components:{
                    subcomponent:{
                        template:`<div>
                                    我是子组件，我接受父组件传值：{{num+1}} {{title}}
                                    <button @click="change">更改</button>
                                 </div>`,
                        props: {
                            msg:{
                                type: Number
                            },
                            title:{
                                type: String,
                                required: true
                            }
                        },
                        data(){
                            return {
                                num: this.msg
                            }
                        },
                        methods:{
                            change(){
                                this.num = 50;
                            }
                        }
                    }
                }
            }
        }
    }).mount('#app');
</script>

这样做是为了防止子组件意外改变父组件的状态，从而导致父组件的行为异常。

<script src="https://unpkg.com/vue@next"></script> 
<script> 
    //... 
        subcomponents:{ 
            template:`<div> 
                        我是子组件，我能获取父组件传递的数据：{{msg}} 
                        <button @click="update">更改</button> 
                        </div>`, 
            props:['msg'],
                methods: { 
                    update(){ 
                        this.msg = 'haha'; 
                } 
            } 
        } 
    //... 
</script>

当子组件试图修改父组件传递值时，就会出现警告，表示 msg 是只读的：

vue@next:1568 [Vue warn]: Attempting to mutate prop "msg". Props are readonly

父组件获取子组件数据

和上面不一样的是，父组件想要获取子组件的数据时，需要子组件通过emit主动将自己的数据发送给父组件。

<div id="app">
    <mycomponent></mycomponent>
</div>

<template id="mytemplate">
    <div>
        <p>我是父组件，接受子组件传递的数据 {{childValue}}</p>
        <subcomponent msg="hello world!" @childmsg="get"></subcomponent>
    </div>
</template>

<script src="../js/vue3.js"></script>
<script>
    Vue.createApp({
        data(){
            return {}
        },
        components:{
            mycomponent:{
                template:'#mytemplate',
                data(){
                    return {
                        childValue: ''
                    }
                },
                methods:{
                    get(value){
                        this.childValue = value;
                    }
                },
                components:{
                    subcomponent:{
                        template:`<div>
                                    我是子组件，我接受父组件传值：{{msg}}<br>
                                    <button @click="send">给父组件传值</button>
                                 </div>`,
                        props: ['msg'],
                        methods:{
                            send(){
                                this.$emit('childmsg','这是子组件的数据');
                            }
                        }
                    }
                }
            }
        }
    }).mount('#app');
</script>

首先，我们需要在子组件中触发一个主动发送数据的事件。上面的例子中是一个点击事件send；

其次，在点击事件中使用emit方法，这个emit接收两个参数：传递数据的事件和需要传递的数据。这个传递数据的事件也是自定义的；

然后在父组件中引用子组件，并在引用的子组件中使用on监听上一步传递数据的事件。上面的例子中是childmsg；

最后在父组件中使用这个事件，这个事件带有一个参数，就是从子组件发送过来的数据。

多级组件通信

下面是一个多级组件之间的传值：

<div id="app">
    <mycomponent></mycomponent>
</div>

<template id="mytemplate">
    <div>
        <p>我是父组件</p>
        <subcomponent msg="hello"></subcomponent>
    </div>
</template>

<script src="../js/vue3.js"></script>
<script>
    Vue.createApp({
        data(){
            return {}
        },
        components:{
            mycomponent:{
                template:'#mytemplate',
                components:{
                    subcomponent:{
                        template:`<div>
                                      我是子组件<br>
                                      <subsubcomponent :msg="msg"></subsubcomponent>
                                  </div>`,
                        props:['msg'],          
                        components: {
                            subsubcomponent:{
                                template:`<div>我是孙子组件，接收爷爷组件传的值 {{msg}}</div>`,
                                props:['msg'],   
                            }
                        }
                    }
                }
            }
        }
    }).mount('#app');
</script>

上面实例中，父组件经过三级传递，将数据传递给孙子组件。

那么，如果此时有更多级组件嵌套，那么传递数据将非常麻烦。而且，父组件其实只想将数据传递给孙子组件，但

却不得不通过子组件接力传递。

所以，Vue提供了 provide/inject 来解决这个问题。

provide和inject

<div id="app">
    <mycomponent></mycomponent>
</div>

<template id="mytemplate">
    <div>
        <p>我是父组件</p>
        <subcomponent></subcomponent>
    </div>
</template>

<script src="../js/vue3.js"></script>
<script>
    Vue.createApp({
        data(){
            return {}
        },
        components:{
            mycomponent:{
                template:'#mytemplate',
                data(){
                    return {
                        score: 99
                    }
                },
                provide(){
                    return {
                        num: this.score
                    }
                },
                components:{        //声明子组件 
                    subcomponent:{
                        template:`<div>
                                      我是子组件<br>
                                      <subsubcomponent></subsubcomponent>
                                  </div>`,       
                        components: {
                            subsubcomponent:{
                                template:`<div>我是孙子组件，接收爷爷组件传的值 {{num}}</div>`, 
                                inject: ['num']
                            }
                        }
                    }
                }
            }
        }
    }).mount('#app');
</script>

上面实例中，使用 provide 来声明要传递的数据

在孙子组件中使用inject 来接收数据。这样，就可以越过子组件进行数据传递了。

slot插槽

父组件不但可以向子组件传递数据，还能向子组件分发内容（就是向子组件传递html内容）。

官方解释：Vue 实现了一套内容分发的 API，将 slot 元素作为承载分发内容的出口。

基本用法

<div id="app">
    <mycomponent></mycomponent>
</div>

<template id="mytemplate">
    <div>
        <p>我是父组件</p>
        <subcomponent>
          <p>父组件向子组件分发的内容</p>
        </subcomponent>
    </div>
</template>

<script src="../js/vue3.js"></script>
<script>
    Vue.createApp({
        data(){
            return {}
        },
        components:{ 
            mycomponent:{
                template:'#mytemplate',
                data(){
                    return {
                        num: 100
                    }
                },
                components:{ //声明子组件 
                    subcomponent:{
                        template:`<div>
                                     <p>我是子组件</p>
                                     <slot></slot>
                                  </div>`,
                    }
                }
            }
        }
    }).mount('#app');
</script>

在父组件中，使用子组件标签时，标签中将会添加需要分发给子组件的内容，也就是一段html代码。

在子组件中，就可以使用slot标签来显示父组件分发的内容。

值得注意的是，官网中有这样一句话：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

插槽作用域

<div id="app">
    <mycomponent></mycomponent>
</div>

<template id="mytemplate">
    <div>
        <p>我是父组件</p>
        <subcomponent>
          <p>这是插槽内容{{msg}}</p>
        </subcomponent>
    </div>
</template>

<script src="../js/vue3.js"></script>
<script>
    Vue.createApp({
        data(){
            return {}
        },
        components:{
            mycomponent:{
                template:'#mytemplate',
                data(){
                    return {
                        msg: '父组件向子组件分发的内容'
                    }
                },
                components:{        //声明子组件
                    subcomponent:{
                        template:`<div>
                                     <p>我是子组件</p>
                                     <slot></slot>
                                  </div>`,
                    }
                }
            }
        }
    }).mount('#app');
</script>

上面实例中，父组件会访问自己的 msg 数据去解析插槽内容。之后才分发给子组件。

并不是在子组件中去访问父组件的 msg 数据。

slot默认内容

如果父组件没有提供插槽内容，那么子组件可以在 slot标签中书写插槽的默认内容。

<template id="mytemplate">
    <div>
        <subcomponent></subcomponent>
    </div>
</template>

subcomponent:{
    template:`<div> 
                <p>我是子组件</p> 
                <slot>插槽默认内容</slot> 
              </div>`,
}

当父组件没有提供插槽内容时，子组件将使用自己的默认内容显示。

具名插槽

有时，父组件需要分发多个内容，并且这些内容需要在子组件的不同位置进行显示。

比如：在实际应用中，一个组件的头部和尾部是共通的，那么头部和尾部就应该由父组件，统一分发给所有子组

件。此时可以使用具名插槽。

<div id="app">
    <mycomponent></mycomponent>
</div>
<template id="mytemplate">
    <div>
        <p>我是父组件</p>
        <subcomponent>
            <template v-slot:header> 
                <div>头部内容</div> 
            </template> 
            <template v-slot:footer> 
                <div>尾部内容</div> 
            </template>
        </subcomponent>
    </div>
</template>
<script src="../js/vue3.js"></script>
<script>
    Vue.createApp({
        data(){
            return {}
        },
        components:{
            mycomponent:{
                template:'#mytemplate',
                data(){
                    return {
                        msg: '父组件向子组件分发的内容'
                    }
                },
                components:{        //声明子组件
                    subcomponent:{
                        template:`<div>
                                        <slot name="header"> 
                                            <div>默认头部内容</div> 
                                        </slot>
                                     <p>我是子组件</p>
                                        <slot name="footer"> 
                                            <div>默认尾部部内容</div> 
                                        </slot> 
                                  </div>`,
                    }
                }
            }
        }
    }).mount('#app');
</script>

在父组件中，使用 template 标签声明具名插槽，并取名。

在子组件中，通过插槽名决定内容的显示位置。

v-slot:header 可以简写为 #header。

总结：插槽是父子组件关系中，插槽在子组件中展示位置以及展示内容的操作手段。父组件决定展示内容，子组件

决定展示位置。

动态组件

基本用法

有时，我们可能需要根据状态来决定使用那个组件，比如下面的例子：

<div id="app">
    <mycomponent></mycomponent>
</div>

<template id="mytemplate">
    <div>
        <p>我是父组件</p>
        <!-- <subcomponent1 v-if="num==0"></subcomponent1>
        <subcomponent2 v-if="num==1"></subcomponent2> -->
        <component :is="comName"></component>
        <button @click="change">切换子组件</button>
    </div>
</template>

<script src="../js/vue3.js"></script>
<script>
    Vue.createApp({
        data(){
            return {}
        },
        components:{
            mycomponent:{
                template:'#mytemplate',
                data(){
                    return {
                        comName:'subcomponent1'
                    }
                },
                methods:{
                    change(){
                        if(this.comName=='subcomponent1'){
                            this.comName='subcomponent2';
                        }else{
                            this.comName='subcomponent1';
                        }
                    }
                },
                components:{        //声明子组件
                    subcomponent1:{
                        template:`<div>我是子组件1</div>`
                    },
                    subcomponent2:{
                        template:`<div>我是子组件2</div>`
                    }
                }
            }
        }
    }).mount('#app');
</script>

上面实例中，通过在子组件上使用 v-if 来判断 componentname 的状态，从而实现对子组件的切换使用。

但是上面的写法有些麻烦，所以Vue提供了动态组件用于实现上面的功能。

<template id="mytemplate">
    <div>
        <component :is="comName"></component>
        <button @click="change">切换子组件</button>
    </div>
</template>

使用 component 标签中的 is 属性，它会根据子组件名来动态的切换子组件的显示。

保持组件状态 keep-alive保持组件状态

上面实例中，当子组件切换时，子组件状态将会被重置（比如：文本框中输入的数据不能保持）。

vue提供了 keep-alive 标签让我们保持子组件状态。它能够将子组件状态缓存起来，在子组件显示时在恢复其状

态。

<div id="app">
    <mycomponent></mycomponent>
</div>

<template id="mytemplate">
    <div>
        <p>我是父组件</p>
        <keep-alive>
            <component :is="comName"></component>
        </keep-alive>
        <button @click="change">切换子组件</button>
    </div>
</template>

<script src="../js/vue3.js"></script>
<script>
    Vue.createApp({
        data(){
            return {}
        },
        components:{
            mycomponent:{
                template:'#mytemplate',
                data(){
                    return {
                        comName:'subcomponent1'
                    }
                },
                methods:{
                    change(){
                        if(this.comName=='subcomponent1'){
                            this.comName='subcomponent2';
                        }else{
                            this.comName='subcomponent1';
                        }
                    }
                },
                components:{
                    subcomponent1:{
                        template:`<div>我是子组件1 <input type="text"/></div>`
                    },
                    subcomponent2:{
                        template:`<div>我是子组件2 <textarea></textarea></div>`
                    }
                }
            }
        }
    }).mount('#app');
</script>

    <template id="mytemplate">
        <div>
            <p>我是父组件</p>
            <keep-alive>
                <component :is="comName"></component>
            </keep-alive>
            <button @click="change">切换子组件</button>
        </div>
    </template>

当子组件切换时，子组件状态将会被保持。

异步组件

在实际开发中，一个应用可能会非常复杂。它可能会由很多组件组成。如果在应用启动时就加载所有组件，势必会造成效率低下。因此，正确的方式应该是按需加载。也就是先加载必要组件，然后根据需求在加载其它组件。

为了实现这个需求，Vue为我们提供了异步组件。

官网解释：在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染

<div id="app">
    <mycomponent></mycomponent>
</div>

<template id="mytemplate">
    <div>
        <p>我是父组件</p>
        <subcomponent1></subcomponent1>
        <subcomponent2></subcomponent2>
    </div>
</template>

<script src="../js/vue3.js"></script>
<script>
    Vue.createApp({
        data(){
            return {}
        },
        components:{
            mycomponent:{
                template:'#mytemplate',
                data(){
                    return {
                    }
                },
                components:{
                    subcomponent1:{
                        template:`<div>我是子组件1</div>`
                    },
                    subcomponent2:Vue.defineAsyncComponent(()=>{
                        return new Promise((resolve,reject)=>{
                            setTimeout(()=>{
                                resolve({
                                    template:'<div>我是子组件2</div>'
                                })
                            },3000);
                        });
                    })
                }
            }
        }
    }).mount('#app');
</script>

上面代码中声明了两个子组件，一个是同步组件，一个是异步组件。