2022-12-23【技术】Vue2的12种组件通信(下)

书接上文~~

7、parent

children:获取到一个包含所有子组件(不包含孙子组件)的 VueComponent 对象数组,可以直接拿到子组件中所有数据和方法等parent:获取到一个父节点的 VueComponent 对象,同样包含父节点中所有数据和方法等

// Parent.vue
        export default{
            mounted(){
                this.$children[0].someMethod() // 调用第一个子组件的方法
                this.$children[0].name // 获取第一个子组件中的属性
            }
        }
        
        // Child.vue
        export default{
            mounted(){
                this.$parent.someMethod() // 调用父组件的方法
                this.$parent.name // 获取父组件中的属性
            }
        }

8、provide / inject

provide / inject 为依赖注入,说是不推荐直接用于应用程序代码中,但是在一些插件或组件库里却是被常用,所以我觉得用也没啥,还挺好用的:
provide:可以让我们指定想要提供给后代组件的数据或方法。
inject:在任何后代组件中接收想要添加在这个组件上的数据或方法,不管组件嵌套多深都可以直接拿来用。
要注意的是 provide 和 inject 传递的数据不是响应式的,也就是说用 inject 接收来数据后,provide 里的数据改变了,后代组件中的数据不会改变,除非传入的就是一个可监听的对象。
所以建议还是传递一些常量或者方法。

// 父组件
    export default{
        // 方法一 不能获取 methods 中的方法
        provide:{
            name:"沐华",
            age: this.data中的属性
        },
        // 方法二 不能获取 data 中的属性
        provide(){
            return {
                name:"沐华",
                someMethod:this.someMethod // methods 中的方法
            }
        },
        methods:{
            someMethod(){
                console.log("这是注入的方法")
            }
        }
    }
    
    // 后代组件
    export default{
        inject:["name","someMethod"],
        mounted(){
            console.log(this.name)
            this.someMethod()
        }
    }

9、EventBus

EventBus 是中央事件总线,不管是父子组件,兄弟组件,跨层级组件等都可以使用它完成通信操作。
定义方式有三种:

// 方法一
        // 抽离成一个单独的 js 文件 Bus.js ,然后在需要的地方引入
        // Bus.js
        import Vue from "vue"
        export default new Vue()
        
        // 方法二 直接挂载到全局
        // main.js
        import Vue from "vue"
        Vue.prototype.$bus = new Vue()
        
        // 方法三 注入到 Vue 根对象上
        // main.js
        import Vue from "vue"
        new Vue({
            el:"#app",
            data:{
                Bus: new Vue()
            }
        })

使用如下,以方法一按需引入为例:

// 在需要向外部发送自定义事件的组件内
        
        import Bus from "./Bus.js"
        export default{
            methods:{
                handlerClick(){
                    // 自定义事件名 sendMsg
                    Bus.$emit("sendMsg", "这是要向外部发送的数据")
                }
            }
        }
        
        // 在需要接收外部事件的组件内
        import Bus from "./Bus.js"
        export default{
            mounted(){
                // 监听事件的触发
                Bus.$on("sendMsg", data => {
                    console.log("这是接收到的数据:", data)
                })
            },
            beforeDestroy(){
                // 取消监听
                Bus.$off("sendMsg")
            }
        }

** 注意:**
1、最好再beforeDestory钩子中,用$off解绑当前组件用到的事件。
2、主要原理:VueComponent.prototype.proto === Vue.prototype。


主要原理

10、Vuex
Vuex 是状态管理器,集中式存储管理所有组件的状态。这一块内容过长,如果基础不熟的话可以看这个Vuex,然后大致用法如下。
比如创建这样的文件结构:


image.png

index.js 里内容如下

import Vue from 'vue'
        import Vuex from 'vuex'
        import getters from './getters'
        import actions from './actions'
        import mutations from './mutations'
        import state from './state'
        import user from './modules/user'
        
        Vue.use(Vuex)
        
        const store = new Vuex.Store({
          modules: {
            user
          },
          getters,
          actions,
          mutations,
          state
        })
        export default store

然后在 main.js 引入

import Vue from "vue"
            import store from "./store"
            new Vue({
                el:"#app",
                store,
                render: h => h(App)
            })

然后在需要的使用组件里

import { mapGetters, mapMutations } from "vuex"
                export default{
                    computed:{
                        // 方式一 然后通过 this.属性名就可以用了
                        ...mapGetters(["引入getters.js里属性1","属性2"])
                        // 方式二
                        ...mapGetters("user", ["user模块里的属性1","属性2"])
                    },
                    methods:{
                        // 方式一 然后通过 this.属性名就可以用了
                        ...mapMutations(["引入mutations.js里的方法1","方法2"])
                        // 方式二
                        ...mapMutations("user",["引入user模块里的方法1","方法2"])
                    }
                }
                
                // 或者也可以这样获取
                this.$store.state.xxx
                this.$store.state.user.xxx

11、$root

root,任何组件都可以获取当前组件树的根 Vue 实例,通过维护根实例上的 data,就可以实现组件间的数据共享。
通过这种方式,虽然可以实现通信,但在应用的任何部分,任何时间发生的任何数据变化,都不会留下变更的记录,这对于稍复杂的应用来说,调试是致命的,不建议在实际应用中使用。

//main.js 根实例
        new Vue({
            el: '#app',
            store,
            router,
            // 根实例的 data 属性,维护通用的数据
            data: function () {
                return {
                    author: ''
                }
            },
            components: { App },
            template: '',
        });
        
        
        
        
        
        
        
        

12、slot

就是把子组件的数据通过插槽的方式传给父组件使用,然后再插回来。

// Child.vue
        
        export default{
            data(){
                return {
                    user:{ name:"小赵" }
                }
            }
        }
        
        // Parent.vue
        

拓展:消息的发布和订阅

借用第三方库,推荐使用 pubsub-js,可以实现任意组件间的通信
使用方法:
1、组件A中订阅消息(接收数据)


2、组件B中发布消息(提供数据)


你可能感兴趣的:(2022-12-23【技术】Vue2的12种组件通信(下))