Vue-10-组件

阿国GG在学习

已于 2022-03-30 13:53:56 修改

阅读量984

点赞数

分类专栏： Vue 文章标签： vue.js

于 2022-03-30 00:53:02 首次发布

本文链接：https://blog.csdn.net/weixin_46147113/article/details/123835584

版权

Vue 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了Vue.js组件的各个方面，包括组件的注册（全局与局部）、组件选项（模板、数据、props、方法、生命周期钩子）、组件props的静态与动态使用、单向数据流原理、组件间的通信（自定义事件、事件总线）、内容分发slot插槽的用法（默认、具名、作用域插槽）以及动态组件的实现和keep-alive的使用。文章深入浅出地探讨了Vue.js组件的各个关键概念，旨在提升开发效率和项目可维护性。

摘要由CSDN通过智能技术生成

一、组件感受

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button-counter></button-counter>
    <button-counter></button-counter>
</div>

<script>
    //  定义一个名为 button-counter的全局组件
    Vue.component('button-counter',{
        data:function (){
            return {
                count: 0
            }
        },
        template:'<button v-on:click="count++">点我{{count}}次了</button>'
    })



    var vm=new Vue({
        el:'#app',
    })
</script>
</body>
</html>

运行结果

使用的组件的好处：

1、提高开发效率

2、方便重复使用

3、简化调式步骤

4、提升整个项目的可维护性

5、便于协同开发

二、组件的注册

1、组件注册类型：全局注册和局部注册

2、全局注册

第一种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <my-component></my-component>
</div>

<script>
    /*
    全局注册：必须确保在实例初始化之前注册，这样才能在任意实例种被使用。全居住从有三种方式
    命名推荐：使用小写字母加 “-” 分隔符的形式命名
    注意：
        1、template的DOM结构必须被一个而且是唯一一个根元素所包含，直接引用而不被“<div></div>”包裹是无法被渲染的
        2、
          Vue.component('组件名称',{
          //  选项
        })

    */
    Vue.component('my-component',{
        template:'<h1>全局注册</h1>'
    })


    var vm=new Vue({
        el:'#app',
    })
</script>
</body>
</html>

运行结果

第二种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <my-component></my-component>
</div>

<script>
    var list=Vue.extend({
        template:'<h1>组件的第二种注册方式</h1>'
    });
    Vue.component('my-component',list);

    //  根实例
    var vm=new Vue({
        el:'#app',
    })
</script>
</body>
</html>

运行结果

第三种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <my-component></my-component>
</div>
<template id="tmpl">
    <div><a href="#">登录</a>|<a href="">注册</a></div>
</template>
<script>
    Vue.component('my-component',{
        template: '#tmpl'
    });

    var vm=new Vue({
        el:'#app',
    })
</script>
</body>
</html>

运行结果

3、组件的局部注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <account></account>
    <login></login>
</div>

<script>
    var vm=new Vue({
        el:'#app',
        data:{},
        methods:{},
        components:{    //  定义子组件
            account:{
                template:'<div><h1>定义的是子组件*****</h1></div>'
            },
            //  定义子组件的子组件
            login:{
                    template:'<h1>这是子组件</h1>'
            }
        }
    })
</script>
</body>
</html>

运行结果

三、组件选项

Vue组件可以理解为预先定义好的行为ViewModel类。一个组件可以预先定义很多选项。但是最核心的有一下几个。

1、模板（template）：模板生命了数据和最终展示给用户的DOM之间的映射关系

2、初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，通常是私有的状态。

3、接受的外部参数（props）：组件之间通过参数来进行数据的传递和共享。参数默认是单项绑定（由上至下），但也可以显示声明为双向绑定

4、方法（methods）：对数据的改动操作一般都在组件的方法内进行。可以通过v-on指令将用户输入事件和组件方法进行绑定

5、生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，例如created、attached、destroyed等。

四、组件props

1、静态props

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <my-component message="1+1"></my-component>
    <hr>
<!--  如果不是用v-bind页面显示的就是字符串，使用了就会当做javaScript进行计算  -->
    <my-component :message="1+1"></my-component>
</div>

<script>
    Vue.component('my-component',{
        props:['message'],
        template:'<span>{{message}}</span>'
    })
    var vm=new Vue({
        el:'#app',
    })
</script>
</body>
</html>

运行结果

2、动态props

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="parentMessage">
    <my-component :message="parentMessage"></my-component>
</div>

<script>
    Vue.component('my-component',{
        props:['message'],
        template:'<span>{{message}}</span>'
    })
    var vm=new Vue({
        el:'#app',
        data:{
            parentMessage:''
        }
    })
</script>
</body>
</html>

运行结果

3、单向数据流

所有的props都使得其父子props之间形成了一个单向下绑定：父级props的更新会向下流动到子组件种，但是反过来则不行。目的是为了尽可能将父子组件解耦。避免子组件无意中修改了父组件的状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <parent></parent>
</div>

<script>
    var childNode={
        template:'<div><div><span>子组件数据流</span>'+
            '<input type="text" v-model="childMsg"></div><p>{{childMsg}}</p></div>',
        props:['childMsg']

    }
    var parentNode={
        template:'<div><div><span>父组件数据流</span>'+
            '<input  v-model="msg"></div><p>{{msg}}</p><child :childMsg="msg"></child></div>',
        components:{
            'child':childNode
        },
        data(){
            return{
                'msg':'match'
            }
        }
    }


    var vm=new Vue({
        el:'#app',
        components:{
            'parent':parentNode
        }
    })
</script>
</body>
</html>

运行结果

五、组件通信

1、自定义事件

当子组件需要向父组件传递数据时，就要用到自定义事件。v-on指令除了见提供DOM事件外，还可以用于组件之间的自定义事件。

当子组件中用$emit()来触发事件以便将内部数据传递给父组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动逸事件</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <my-component @myclick="onClick"></my-component>
</div>

<script>
    //  当子组件需要向父组件传递数据时，就要用到自定义事件。v-on除了监听DOM事件外，还可以用于组件之间的自定义事件
    Vue.component('my-component',{
        template:'<div><button type="button" @click="childClick">单机触发自定义事件</button></div>',
        methods:{
            childClick(){
                //  在子组件种，第一个参数是自定义事件的名字，后边的参数是一次想要传递出去的数据
                this.$emit('myclick','这是我传递出去的数据1','这是我传递出去的数据2')
            }
        }
    })


    var vm=new Vue({
        el:'#app',
        methods:{
            onClick(){
                console.log(arguments)
            }
        }
    })
</script>
</body>
</html>

运行结果

2、$emit / $on

这种方式通过一个空的Vue实例作为中央事件中心，用它来触发事件和监听事件，巧妙而清凉的是西安了任何组件之间的通信，包括父子、兄弟、跨级

实现方式

var Event=new Vue();
    Event.$emit(事件名，数据);
    Event.$on(事件名,data => {});

架设兄弟组件有3个，分别是A、B、C组件，C组件获取A组件和B组件的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <my-a></my-a>
    <my-b></my-b>
    <my-c></my-c>
</div>

<template id="a">
    <div>
        <h3>A组件：{{name}}</h3>
        <button @click="send">将数据发送给C组件</button>
    </div>
</template>
<template id="b">
    <div>
        <h3>B组件：{{age}}</h3>
        <button @click="send">将数据发送给C组件</button>
    </div>
</template>
<template id="c">
    <div>
        <h3>C组件：{{name}},{{age}}</h3>
    </div>
</template>
<script>
    var Event=new Vue();
    var A={
        template:'#a',
        data(){
            return{
                name:'我是A组件'
            }
        },
        methods:{
            send(){
                Event.$emit('data-a',this.name);
            }
        }
    }
    var B={
        template:'#b',
        data(){
            return{
                age:18
            }
        },
        methods:{
            send(){
                Event.$emit('data-b',this.age)
            }
        }
    }

    var C={
        template:'#c',
        data(){
            return{
                name:'',
                age:""
            }
        },
        mounted(){
            Event.$on('data-a',name=>{
                this.name=name;
            })
            Event.$on('data-b',age=>{
                this.age=age;
            })
        }
    }



    var vm=new Vue({
        el:'#app',
        components:{
            'my-a':A,
            'my-b':B,
            'my-c':C
        }
    })
</script>
</body>
</html>

运行结果：

注意：$on见识了自定义事件data-a和data-b，因为有时不确定何时会触发事件，一般会在mounted或created钩子中进行监听

六、内容分发slot插槽

1、介绍

在实际项目开发中，时常会把父组件的内容和子组件的内容与子组件自己的模板混合起来使用，而这样的一个过程在Vue中被称为内容分发，也常常被称为slot(插槽)。

2、基础用法

由于slot是一块模板，因此对于任何一个组件，从模板种类的角度来分，其实都可以分为非插槽模板和插槽模板。其中非插槽模板值得时HTML模板（也就是HTML的一些元素，例如div、span等构成的元素），其显示与否及怎样显示完全由插件自身控制，但是插槽模板（也就是slot）是一个空壳子，它显示与否及怎样显示完全由父组件来控制，不过，插槽显示的位置由组件自身决定，slot写在组件template的那个部分，父组件传过来的模板将来就显示在那个部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <child>
        <span>123465</span>
    </child>
</div>

<script>
    var vm=new Vue({
        el:'#app',
        components:{
            child:{
                //  如果此处不加 slot 插槽  则span的内容不会显示
                template:'<div><slot></slot>这是子组件内容</div>'
    }
        }
    })
</script>
</body>
</html>

运行结果

3、组件作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <child-component ></child-component>
<!--   这个someChildren绑定的是父组件，所以是显示不出来 -->
    <child-component  v-show="someChildren"></child-component>
</div>

<script>
    Vue.component('child-component',{
        template:'<h1 v-show="someChildren">这是一个子组件</h1>',
        data(){
            return{
                someChildren:true
            }
        }
    })
    var vm=new Vue({
        el:'#app',
    })
</script>
</body>
</html>

运行结果

4、默认slot

如果要使父组件在子组件种插入内容，必须在子组件种声明slot标签，如果子组件模板不包含<slot>插口，父组件的内容跟将会被丢弃

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <index>
        <span>插入数据</span>
        <span>首页</span>
        <span>shouted</span>
        <h1>手机</h1>
    </index>
</div>

<script>
    //  如果要使父组件在子组件种插入内容，必须在子组件种声明slot标签，如果子组件模板不包含<slot>插口，父组件的内容跟将会被丢弃

    Vue.component('index',{
        template:'<div><slot></slot>默认slot</div>'
    })

    var vm=new Vue({
        el:'#app',
    })
</script>
</body>
</html>

运行结果

5、具名slot

slot元素可以是一个特殊的属性name来配置如何分发内容。多个slot标签可以由不同名字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <child>
        <span slot="one">123456</span>
        <span slot="two">abcdef</span>
    </child>
</div>

<script>
    //  slot元素可以用一个特殊的属性name来配置如何分发内容，多个slot标签可以有不同的名字
    /*
        1、父组件在分发得分标签种添加属性“slot=name名”
        2、子组件在对应分发的位置上的slot标签种添加属性“name=name名”
     */
    var vm=new Vue({
        el:'#app',
        components:{
            child:{
                template:'<div><slot name="two"></slot>我是子组件 <slot name="one"></slot></div>'
            }
        }
    })
</script>
</body>
</html>

运行结果

6、作用域插槽

作用域插槽是一个带绑定数据的插槽，允许组件自定义如何渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <child>
        <template slot-scope="props">    <!-- 固定写法，属性值可以自定义-->
            <li>{{props.item}}</li>     <!-- 插值表达式可以直接使用  -->
            <h1>{{props.item}}</h1>
        </template>
    </child>
</div>

<script>
    Vue.component('child',{
        data(){
            return{
                list:[1,2,3,4]
            }
        },

        //  template:'<div><ul><li v-for="item in list">{{item}}</li></ul></div>'

        //  <slot v-for="item in list" :item=item>：child组件去实现一个列表的循环，但是列表项种的每一项怎么显示，不不用关心，具体怎么实现右外部决定
        template:'<div><ul><slot v-for="item in list" :item=item></slot></ul></div>'
    })

    var vm=new Vue({
        el:'#app',
    })
</script>
</body>
</html>

说明：

① <slot v-for="item in list" :item=item>：child组件去实现一个列表的循环，但是列表项种的每一项怎么显示，不不用关心，具体怎么实现由外部决定

②<template slot-scope="props"></template>是一个固定写法，属性值可以自定义。

运行结果

七、动态组件

1、介绍

让多个组件使用同一个挂载点，并动态切换，这就是动态组件。通过保留<component>元素，动态的绑定它的is特性，可以实现动态组件。它的应用场景往往应用在路由控制或者Tab切换中。

2、基本用法

一个简单的切换页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="change">切换界面</button>
<!--  动态切换掉的组件（=非当前显示的组件）被移除掉了，如果把切换回去的组件保留在内存中，可以保留它的状态或避免重新渲染。  -->
    <component :is="currentView"></component>
</div>

<script>
    var vm=new Vue({
        el:'#app',
        data:{
            index:0,
            arr:[
                {template:'<div>我是主页</div>'},
                {template:'<div>我是提交页</div>'},
                {template:'<div>我是存档页</div>'}
            ]
        },computed:{
            currentView(){
                return this.arr[this.index];
            }
        },
        methods:{
            change(){
                this.index=(++this.index)%3
            }
        }
    })
</script>
</body>
</html>

说明：component标签中is属性决定了当前采用的子组件，:is是v-bind的简写，绑定了父组件中的data的currentView属性。单击按钮时，会更改数组arr的索引值，同时也修改了子组件的内容

运行结果

点击按钮页面会切换

3、keep-alive

动态切换掉的组件（非当前显示的组件）被移除掉了，如果把切换回去的组件保留在内存中，可以保留它的状态或避免重新渲染。<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁他们，以便提高提取效率。<keep-alive>是一个抽象组件，自身不会渲染一个DOM元素，也不会出现在父组件链中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="change">切换界面</button>
<!--   <keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁他们，以便提高提取效率  -->
    <keep-alive>
        <component :is="currentView"></component>
    </keep-alive>
</div>

<script>
    var vm=new Vue({
        el:'#app',
        data:{
            index:0,
            arr:[
                {template:'<div>我是主页</div>'},
                {template:'<div>我是提交页</div>'},
                {template:'<div>我是存档页</div>'}
            ]
        },computed:{
            currentView(){
                return this.arr[this.index];
            }
        },
        methods:{
            change(){
                this.index=(++this.index)%3
            }
        }
    })
</script>
</body>
</html>

运行结果

4、activated钩子函数

Vue给组件提供了activated钩子函数，作用于动态组件切换或者静态组件初始化的过程中。activated时和template、data等属性平级的一个属性，其形式是一个函数，函数里默认有一个参数，而这个参数是一个函数，执行这个函数时，才会切换组件，即可延迟执行的当前的组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="toShow">单机显示子组件</button>
    <keep-alive>
        <component v-bind:is="wich_to_show"></component>
    </keep-alive>
</div>

<script>
    var vm=new Vue({
        el:'#app',
        data:{
            wich_to_show:"first"
        },
        methods:{
            toShow:function () {
                var arr=["first","second","third",""];
                var index=arr.indexOf(this.wich_to_show);
                if (index<2){
                    this.wich_to_show=arr[index+1];
                }else{
                    this.wich_to_show=arr[0];
                }
                console.log(this.$children)
            }
        },
        components:{
            first:{     //  第一个组件
                template:'<div>这里是第一个组件</div>'
            },
            second:{     //  第二个组件
                template:'<div>这里是第二个组件，这里时延迟后的内容{{hello}}</div>',
                data(){
                    return{
                        hello:""
                    }
                },
                activated:function (done){
                    console.log('beixin')
                    var self=this;
                    var starTime=new Date().getTime();//    获得当前事件
                    //  2s后执行
                    while(new Date().getTime()<starTime+2000){
                        self.hello='我是延迟后的内容'
                    }
                }
            },
            third:{
                template:'<div>这里是组件3</div>'
            }
        }
    })
</script>
</body>
</html>

运行结果

6、ref和$refs

在Vue中一般很少直接操作DOM，但不可避免有时候确定需要用到，这时我们就可以通过ref和$refs来实现：

①ref：ref被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上，如果在普通的DOM元素上使用，引用指向的就是DOM元素，如果在子组件上，引用指向的就是组件实例。

②$refs：$refs时一个对象，持有已注册过ref的所有子组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="获取h3的值" @click="getElement">
    <h3 id="myh3" ref="myh3">我是h3</h3>
    <hr>
    <login ref="mylogin"></login>
</div>

<script>
    /*
        介绍：通过ref和$refs可以实现直接操作DOM
        ref：ref被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上，如果在普通的DOM元素上使用，
            引用指向的就是DOM元素，如果在子组件上，引用指向的就是组件的实例
        $refs：$refs是一个对象，持有已注册过ref的所有子组件
     */
    var login={
        template:'<h3>我是login子组件</h3>',
        data(){
            return{
                msg:'ok'
            }
        },
        methods:{
            show(){
                console.log("show方法执行了")
            },
        }
    }



    var vm=new Vue({
        el:'#app',
        data:{},
        methods:{

            getElement(){
                console.log(this.$refs.myh3.innerHTML);
                console.log(this.$refs.mylogin.msg);
                this.$refs.mylogin.show();
            }
        },
        components:{
            login
        }
    })
</script>
</body>
</html>

运行结果