vue中的使用provide和inject

1、类型

1、provide：Object | () => Object
如： provide() {
        return {
            // 通过provide提供自身所有属性
            paper: this
        }
    },
    
2、inject：Array<string> | { [key: string]: string | Symbol | Object }
如： // inject用于引入父级组件所提供的数据
    inject: { paper: { default: {} } },

2、描述

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效

3、注意

提示：1、provide 和 inject 绑定并不是可响应的。这是刻意为之的。
	 2、然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。
     3、需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。
     4、子孙层的provide会掩盖祖父层provide中相同key的属性值

4、原理

  provide用于向子组件(或子组件中的子组件，无限嵌套)提供自身的一些数据，或者将自身所有属性全部提供，但是提供的数据均为非响应式数据。

  inject用于引入父级组件所提供的数据。

5、示例

子组件通过inject父组件提供的provide的key直接调用父组件的方法
1、父组件(提供自身所有属性)

<template>
    <div>
        <!-- 调用子组件 -->
        <inject-children></inject-children>
    </div>
</template>
<script>
    import injectChildren"./injectChildren";
    export default{
        components: {injectChildren},
        name: 'Provideparent',
        provide(){
            return {
                parentTest:this//通过provide提供自身所有属性
            }
        },
        data: {
            inputString: '这是一个组组件字符串变量的默认值' 
        },
        methods: {
            alertMessage(msg){
                alert(msg)
            }
        }
    }
 
</script>

2、子组件(injectChildren,获取父组件的this)

<template>
    <div>
        <button @click="handleClick">点击我调用父组件方法</button>
    </div>
</template>
<style scoped>
 
</style>
<script>
    export default{
        name: 'InjectChildren',  
        inject: {
          parentTest: {
            // 函数式组件取值不一样
            default: () => {}
          }// 父组件provide的数据
        },
        data(){
            return {}
        },
        methods: {
            //子组件调用父组件方法
            handleClick(){
                this.parentTest().alertMessage("父组件方法!")
            }
        }
    }
</script>

6、实现实时响应

<template>
    <div>
        {{ inputString }}
        <button @click="changeProvide">点击我修改父组件数据</button>
        <button @click="handleClick">点击我调用父组件方法</button>
    </div>
</template>
<style scoped>
 
</style>
<script>
    export default{
        name: 'InjectChildren',
        inject:['parentTest'],// 父组件provide的数据
        data(){
            return {}
        },
        methods: {
            //子组件调用父组件方法
            handleClick(){
                this.parentTest.alertMessage("父组件方法!")
            }
        },
        computed:{
            inputString(){ //使用计算属性动态监听上(n)级组件的某个属性变化
                return this.parentTest.inputString
            }
        },
        methods:{  //更改属性，同时我们的计算属性也会得到更新
            changeProvide(){
                this.parentTest.inputString= 'changed'
            }
        },
    }
</script>

7、 遇到问题

1、provide(){return { parenttest:this}}

2、修改为provide(){return { parenttest:()=>this}}
显示如下：
（） => this
inject时候用函数接收,使用时候用（）当作函数调用

inject: {
  datasetEntityThis: {
    // 函数式组件取值不一样
    default: () => {}
  }
}

3、

<el-button @click="datasetEntityThis().alertMessage('haha')">
  点击我修改父组件数据
</el-button>

引用：
1、https://blog.csdn.net/wyk760629476/article/details/115167669