每周有收获之--Vue 边界组件循环引用、es6 Module循环引用

Vue 边界循环引用。需要注意的地方

1. 如果是 tree 状态递归组件，注意递归过程中的<Tree v-if > 判断。否则容易溢出
2. index业务页面中 先A组件，但是A使用了B组件。B组件中也使用了A组件

   “形成了父子悖论”

除了注意v-if 判断。A组件可以在 动态引入B组件。或者 在A组件beforeCreate

中注册B组件。或者 将二者全注册。

方法1:

 

 

//方法2

在Tree组件中

 

 

beforeCreate: function () {

  this.$options.components.treeItem= require('./treeItem.vue').default

}

// 这点和es6 Modal 循环引用有异曲同工之妙 也是动态创建。举个例子

// index.js

import foo from './foo.js'

foo('index--');

// foo.js

import bar from './bar.js'

const foo = function(invoker) {

console.log(invoker + 'invoker foo.js');

bar('foo--->');

};

export default foo;

// bar.js

import foo from './foo.js'

let invoked = false; // 已经执行了没？默认没有执行。首次执行完成 对 bar 的定义

const bar = function(invoker) {

if (!invoked) {

invoked = true;

console.log(invoker + 'invoker bar.js')

foo('bar.js')

}

};

export default bar;

 

 

输出