组件相关内容

一、什么是组件
就是对数据和方法的封装

二、组件的使用
1、先创建一个vue的实例，语句：const app=Vue.createApp({})
2、注册一个全局组件，语句：app.component("组件名",{
            data(){
                    数据的内容
                },
            template:'模板的内容' }）
（1）在当前的实例范围内都可以使用
（2）各组件内部也可以使用
3、注册一个局部组件，先注册一个组件，然后在添加到实例中
语句：const 组件名={
        data(){
            数据的内容
                  },
        template:'模板的内容' }
         const app=Vue.createApp({
        components:{
            '名称’：组件名
               }
            })
不能直接在一个组件中使用另一个组件，如果要使用，需要在组件中写入
        components:{
            '名称’：组件名
               }
总结：局部组件，想要使用，就在自己内部写入component引入进来
4、使用组件，直接用标签即可，全局语句：<组件名></组件名>
                                                    局部语句：<名称></名称>

三、父子组件通信
1、父传子（props）
在父组件中动态绑定数据，子组件中使用props说明接收的数据的类型和默认值，然后子组件可以使用这个数据

2、子传父（自定义事件）
（1）子组件发射内容，this.$emit('名称',参数）
（2）父组件绑定事件监听，写成：@名称="方法名”，在实例中的methods中写方法，方法名（参数）{内容 }

四、父子组件访问
1、父组件访问子组件
在父组件中使用子组件标签时，增加一个ref属性，父组件可以通过this.$ref访问子组件
2、子组件访问父组件
在子组件中使用this.$parent可以访问父组件
3、子组件访问根组件
在子组件中使用this.$root可以使用访问根组件

五、消息订阅与发布
1、下载库，命令：npm install --save pubsub-js
2、订阅消息，PubSub.subscribe()
3、发布消息，PubSub.publish()

六、插槽
1、作用：占位符，当需要在父组件中写入子组件，暂时不知道写什么，可以在子组件使用插槽，之后父组件在这个占位符中填充内容即可
2、类型
（1）默认插槽<slot></slot>
（2）具名插槽
        插槽使用时添加名字，没有名称则默认为default
（3）作用域插槽
        在父组件中可以使用子组件的数据，在子组件的插槽标签中添加 :data=“数据名”，父组件使用时v-slot:插槽名="数据名"

七、动态组件
1、使用is，语句：<component :is="值"></component>
2、当使用动态组件时，失活的组件不会被缓存，可以使用一组<keep-alive></keep-alive>标签进行缓存

八、组件的生命周期
1、初始化
（1）在实例生成之前自动执行
        beforeCreate()
（2）在实例生成之后自动执行
        created()
（3）组件内容被渲染到页面之前调用
        beforeMount()
（4）组件内容被渲染到页面之后调用
        mounted()
2、变化
（1）数据更新之前调用，发生在虚拟DOM打补丁之前
        beforeUpdate()
（2）数据更新，并且页面也更新之后调用，虚拟DOM重新渲染和打补丁之后调用
        updated()
3、销毁
（1）vue失效时
        beforeUnmount()
（2）vue失效并且DOM完全销毁
        unMounted()