vue-循环引用感想

开场-什么是循环引用

刚开始看着这个官方文档上的循环引用十分的不解意思是什么呢看着官网的意思大概举了个文件管理器类似的实现

我们可以将A组件看成可以展开的B组件的话通过判断数据下是否还有children有的话就又是A组件否则就是B组件了以此类推。

本来循环引用就是这种的不过工作中可能自己没写出来过的也。简单概括为A组件导入了B组件B组件导入了C组件C组件又导入了B组件。、C组件互为对方的子组件和父组件互相依赖不知道如何不经过其中一个组件而完全解析出另一个组件。

探讨-怎么用

直接调用循环嵌套会有问题的。

<!-- 主组件吧 -->
<template>
  <div class='app-container'>
    <comA></comA>
  </div>
</template>

<script>
import comA from './comA.vue'
export default {
  components: {comA},
}

</script>

<!-- A组件 -->
<template>
  <div>
    111
    <comB></comB>
  </div>
</template>

<script>
import comB from './comB.vue';
export default {
  components: {
    comB
  }
</script>

<!-- B组件 -->
<template>
  <div>
    <comA></comA>
  </div>
</template>

<script>
import comA from './comA.vue';
export default {
  components: {
    comA
  },
}
</script>

理论上应该也是可以的

报错了结果看报错貌似是name的问题于是把AB组件都加上了name

你也可能遇到这种错误原因待定哈哈。先把他解决了再说查查资料
给每个A,B组件都加上了代码代码如下:

<!-- A组件 -->
  beforeCreate: function () {
    this.$options.components.comB = require('./comB.vue').default
  }
  <!--  B组件-->
  beforeCreate: function () {
    this.$options.components.comA = require('./comA.vue').default
  }

直接报错连111都没有了。发现这里原来是直接无限循环了导致超出最大调用堆栈大小。

箭头指的还有很多很多没打开的。所以官网也建议添加个v-if来进行控制

再改一下A组件的代码

<!--  -->
<template>
  <div>
    111
    <comB v-if="flag"></comB>
  </div>

</template>

<script>
import comB from './comB.vue';
export default {
  name: 'comA',
  data() {
    return {
      flag: false
    };
  },
  components: {
    comB
  },
  mounted() {

    setTimeout(() => {
      this.flag = true
    }, 2500)
  },
  beforeCreate: function () {
    this.$options.components.comB = require('./comB.vue').default
  }
}

</script>

没有报错完美

后话

如果我们要在主组件中传方法到子组件呢

普通的porps传参

我们这就传到A组件就行如果是按照普通的props传参的话

<!-- 主组件 -->
<template>
  <div class='app-container'>
    <comA :funA="funA"></comA>
  </div>
</template>

<script>
import comA from './comA.vue'
export default {
  components: {comA},
  methods: {
    funA() {
      console.log(111)
    }
  }
}
</script>

<!--A组件  -->
<template>
  <div>
    111
    <comB v-if="flag"></comB>
  </div>
</template>

<script>
import comB from './comB.vue';
export default {
  name: 'comA',
  data() {
    return {
      flag: false
    };
  },
  props: {
    funA:Function
  },
  components: {
    comB
  },
  mounted() {
    setTimeout(() => {
      this.flag = true
      this.funA()
    }, 2500)
  },
  beforeCreate: function () {
    this.$options.components.comB = require('./comB.vue').default
  }
}

</script>

这样会报错的

依赖注入

<!-- 主组件-->
  provide(){
   return {
    funA:this.funA
   }
  },

  methods: {
    funA() {
      console.log(111)
    }
  }
<!-- A组件-->
  inject: ['funA'],
  mounted() {
    setTimeout(() => {
      this.flag = true
      this.funA()
    }, 2500)
  },

结果: