setup中使用provide/inject

provide/inject组件中作为组件选项使用与setup中使用的区别

主要用来进行学习记录的，方便日后自我查看，如有不足，希望可以指出~
作为组件选项使用，与methods使用方法相同

作为组件选项
provide:{代码逻辑}
inject:[provide中的key]
setup中
provide('providename',value)//两个参数:属性名，属性值
inject('providename','默认值')//两个参数：需要inject的属性名，默认值（可选）

组件中使用provide/inject选项来进行数据传输

inject注入组件

<template>
  <div>
    {{location}}<br/>{{location2.a}}</div>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'ProvideInject',
  //需要inject的属性名
  inject: ['location', 'location2']
})
</script>

provide组件

<template>
  <div>
    <ProvideInject/>
  </div>
</template>

<script lang="ts">
import ProvideInject from './components/ProvideInject.vue';
export default ({
  name: 'App',
  components: {ProvideInject},
  //提供的数据
  provide: {
    location: 'North Pole',
    location2: {
      a: 90,
      b: 100
    }
  }
});
</script>

setup选项中使用provide/inject

inject组件

<template>
  <div>
   {{userlocation}}<br/>{{userlocation2.a}}</div>
</template>
<script>
import { defineComponent, inject } from 'vue'
export default defineComponent({
  name: 'ProvideInject',
  setup () {
    const userlocation = inject('location')
    const userlocation2 = inject('location2')
   return {
      userlocation, userlocation2
    }
  }

})
</script>

provide组件

<template>
  <div>
    <ProvideInject/>
  </div>
</template>

<script lang="ts">
import { provide } from 'vue'
import ProvideInject from './components/ProvideInject.vue';
export default ({
  name: 'App',
  components: {ProvideInject},
  setup () {
	   const location = 'North Pole'
	   const  location2 = {
	      a: 'alocatio2',
	      b: 'blocatio2'
	    }
	    provide('location', location)
	    provide('location2', location2 )
	    return {
	      location
	    }
  }
});
</script>

响应式

我们在provide组件中添加

 methods: {
    updateLocation () {
      this.location = '2222'
    }
  },
  mounted () {
    this.updateLocation()
  }

我们 预期的结果是修改了location的值，页面中应该展示的是

2222
alocatio2

但是结果却还是

North Pole
alocatio2

因为setup中定义的值并不是响应式，想要变成响应式的需要使用ref（单个）或reactive（对象）
修改后的provide组件

<template>
  <div>
    <ProvideInject/>
  </div>
</template>

<script lang="ts">
import { provide,ref,reactive} from 'vue'
import ProvideInject from './components/ProvideInject.vue';
export default ({
  name: 'App',
  components: {ProvideInject},
  setup () {
	   const location = ref('North Pole')
	   const  location2 = reactive({
	      a: 'alocatio2',
	      b: 'blocatio2'
	    })
	    provide('location', location)
	    provide('location2', location2 )
	    return {
	      location
	    }
  },
 methods: {
    updateLocation () {
      this.location = '2222'
    }
  },
  mounted () {
    this.updateLocation()
  }
});

结果和预期的相同

2222
alocatio2

修改响应式属性

官网建议尽量在提供者provide中修改响应式的属性，如上面在provide组件中对location修改，
但是我们有时在inject组件中，需要对provide的数据进行修改
可以在provide中定义一个更新数据的方法，然后在inject中进行调用
provide组件

  setup () {
    const location = ref('North Pole')
   const  location2 = reactive({
	      a: 'alocatio2',
	      b: 'blocatio2'
	    })
    const updateLocation = (val) => {
      location.value = val
    }
    provide('location', location)
    provide('location2', location2)
    provide('updateLocation', updateLocation)
  }

inject组件

setup () {
    const userlocation = inject('location')
    const userlocation2 = inject('location2')
    const updateLocation = inject('updateLocation')
    updateLocation('55555555511144447777')
    return {
      userlocation, userlocation2
    }
  }

在inject调用updateLocation方法后，对应结果也会改变

55555555511144447777
alocatio2

总结
建议需要修改的属性放在provide组件中
戳这里：查看对应官网地址