El uso de provide e inject en vue

Primero, el propósito

vueNeutralizar los problemas inconvenientes providepara injectpoder resolverlos .跨层级传递属性

Dos, el componente principal

provideen el componente ancestral 注入.

<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>

3. Subcomponentes

inject Introducir donde necesita ser utilizado.

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

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