vue provide inject vue依赖注入 vue跨多组件通讯

╰+攻爆jí腚メ 2022-12-22 11:27 140阅读 0赞

### [vue进阶实战课目录][vue] ###

## provide inject跨多组件通讯 ##

ref`和`$parent / $children\` 在**跨级**通信时是有弊端的。当组件 A 和组件 B 中间隔了数代（甚至不确定具体级别）时，以往会借助 Vuex 这样的解决方案，不得不引入三方库来支持。本次介绍一种无依赖的组件通信方法：Vue.js 内置的 provide / inject 接口。  
provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。

### vue的组件传值常用三种方式，1.prop传值2.$parent / $children传值3.provide inject ###

### 注意！provide和inject只能传值或提供方法给子组件，子组件不能调用父组件方法和数据！！例如 父组件的provide 子组件都能获取到，但子组件provide 父组件是拿不到的。 ###

<template>
      <div>
        <div class="alert alert-primary" v-show="show">
          消息提示
        </div>
        <div class="btn btn-primary" @click="rename(123)">edit children</div>
        <demo></demo>
      </div>
    </template>
    
    
    <script>
      import demo from './demo-item.vue';
      export default { 
        // 无法获取子组件方法和数据
        inject:['title','rename'],
        provide() { 
          return { 
            show: this.show,
            showHide: this.showHide
          }
        },
        components: { 
          demo
        },
        data() { 
          return { 
            show: false
          };
        },
        methods: { 
    		showHide(data){ 
    			this.show = data
    		}
        },
        watch: { 
    
        },
        computed: { 
    
        },
        created() { 
        console.log(this.title)
        },
        mounted() { 
    
        }
    
    
      };
    </script>
    <style>
    
    </style>

子组件

<template>
      <div>
        <h5>{ { title}}</h5>
        <button class="btn btn-danger" @click="showHide(true)">
        	显示main组件里的消息提示框
        </button>
        <button class="btn btn-warning" @click="showHide(false)">
        	隐藏main组件里的消息提示框
        </button>
      </div>
    </template>
    
    <script>
      export default { 
        inject:['show','showHide'],
        provide(){ 
          return { 
            title:this.title,
            rename:this.rename
          }
        },
        components: { },
        data() { 
          return { 
            title: "我是父组件的标题"
          };
        },
        methods: { 
          rename(data) { 
            this.title = data
          }
        },
        watch: { 
    
        },
        computed: { 
    
        },
        created() { 
          // console.log(this.show)
        },
        mounted() { 
    
        }
    
    
      };
    </script>
    <style>
    
    </style>

[代码][Link 1]

[vue]: https://blog.csdn.net/weixin_45345105/article/details/109844407
[Link 1]: https://github.com/zero19124/vue-advance-demo