vue3 provide inject使用

概论

provide 就是父类用来提供数据给子类或者孙子类

inject 就是子类或者孙子类用来获取父类或者祖先提供的provide数据

代码

• app.vue 祖先层

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld ref="HelloWorldRef" msg="You did it!" />
      <div>
        app_provideData2:{{provideData2}}
      </div>
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>


<script lang="tsx" setup>
import { ref, provide } from "vue"
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import "./components/myts"

const HelloWorldRef = ref('my_injected_value')

console.log(HelloWorldRef, "HelloWorldRef")

provide('HelloWorldRef', HelloWorldRef.value)


const provideData2=ref<string>("i") //把ref注入到provide，孙子类都可以修改到这个数据

provide('provideData2',provideData2)

</script>


<style scoped>
header {
  line-height: 1.5;
  max-height: 100vh;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
}

nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
  border: 0;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }

  nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
  }
}
</style>

• helloworld.vue 子类

<template>
  <div class="greetings">
    <h1 class="green">{{ msg }}</h1>
    <h3>
      You’ve successfully created a project with
      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
    </h3>
    <div>{{ abd }}</div>
    <div>fatherInject:{{ fatherInject }}</div>
    <hChild />
  </div>
</template>


<script lang="ts" setup>
import { reactive, ref, inject } from "vue"
import hChild from "./hChild.vue"



const fatherInject = inject("HelloWorldRef")

console.log(fatherInject, "fatherInject")





defineProps({
  msg: {
    type: String,
    required: true
  }
})

let abc = ref<string>("abc")

console.log(abc.value, "value")

let abd = ref("abd")


console.log(abd, "abd")

let abf = reactive({
  a: {
    b: {
      c: {
        d: 'sklfjslkfjslkf'
      }
    }
  }
})

console.log(abf, "abf")

let abu = ref({
  a: {
    b: {
      c: {
        d: 'sklfjslkfjslkf'
      }
    }
  }
})
console.log(abu, "abu")

defineExpose({
  abc: abc
})



// 定义一个普通的对象obj
const obj = {
  name: "_island"
};

// 代理obj这个对象，并传入get捕获器
const objProxy = new Proxy(obj, {
  // get捕获器
  get: function (target, key) {
    console.log(`捕获到对象获取${key}属性的值操作`);
    return target[key];
  },
});

// 通过代理对象操作obj对象
console.log(objProxy.name);

console.log(objProxy, "objproxy")
// 捕获到对象获取name属性的值操作
// _island

interface myabc {
  one: string,
  two: number,
  three: string,
}


interface myabf extends Omit<myabc, 'one' | 'two'> { }

let abe: myabf = {
  three: "skfjlsfjsldf"
}

console.log(abe, "abe")


</script>

<style scoped>
h1 {
  font-weight: 500;
  font-size: 2.6rem;
  position: relative;
  top: -10px;
}

h3 {
  font-size: 1.2rem;
}

.greetings h1,
.greetings h3 {
  text-align: center;
}

@media (min-width: 1024px) {

  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}
</style>

• hchild.vue 孙子类

<template>
  <div>
    <div>getInject:{{ injected_from_root }}</div>

    <div>provideData2:{{ provideData2 }}</div>
  </div>
</template>


<script lang="ts" setup>
import { reactive, ref, inject, getCurrentInstance, Ref } from "vue"

const { ctx } = getCurrentInstance()

console.log(ctx, "ctx-child-child") //这里ctx等同vue2 this 
const injected_from_root = inject<string>("HelloWorldRef") //这里可以获取到祖先辈的provide数据，说明provide可以多层传递到孙子级别等等
console.log(injected_from_root, "injected_from_root-child-child")

console.log(this, "this-child-child") // undefined this 打印不了，说明默认没this


const provideData2 = inject<Ref>("provideData2"); //ref 对象

console.log(provideData2, "provideData2-child-child") //传递过来时一个ref对象
setTimeout(() => {
  provideData2.value = "hchild_fix" //可以对ref的value进行修改，从而可以修改到祖先的数据
}, 2000)
</script>

<style scoped></style>