vue中provide和inject的使用

一、目的

vue中provide和inject为了解决跨层级传递属性的不方便的问题。

二、父组件

provide在祖先组件中注入。

<template>
  <div>
    <p>AT</p>
    <TestDemo></TestDemo>
  </div>
</template>

<script>
import TestDemo from "./TestDemo.vue";

export default {
      
      
  name: "AT",
  components: {
      
       TestDemo },
  provide() {
      
      
    return {
      
      
      aT: this,
      parent: "AT",
    };
  },
  data() {
      
      
    return {
      
      };
  },
  methods: {
      
      
    test() {
      
      
      console.log("AT");
    },
  },
};
</script>

三、子组件

inject 在需要使用的地方`引入。

<template>
  <div>
    parent: {
   
   { parent }}
    <br />
    <a @click="aT.test">click</a>
  </div>
</template>

<script>
export default {
      
      
  name: "TestDemo",
  inject: ["aT", "parent"],
  data() {
      
      
    return {
      
      };
  },
};
</script>