关于teleport功能的衍生问题

Question

老师， 我举一个场景， 比如我分别有两个项目， 其中一个项目用vue2搭建， 用于展示公司官网， 另外一个项目用react搭建用于展示公司活动相关的页面。 但是虽然是两个不同的项目， 却具有相同的footer 以及 导航。 如果分别去维护那么会消耗人力成本。 基于vue3 这种穿梭框的特性。 能不能用vue3打包一个公共的footer以及导航组件， 发布到npm上。 然后引用包，通过teleport去指定到相应的位置呢。 还有这种跨框架之间如何传递参数呢

Answer 1

张轩 2024-04-17 08:58:14

同学你好

你这种理论上是可行的，因为不管是 React 或者 Vue，只要有 DOM 节点就可以将组件挂载上去，然后任何的逻辑都可以在组件内部消化。不过参数传递应该比较麻烦，因为假如是不同的框架，实现方式不同，组件内部就是一个黑盒，可以传入一个通用的 emitter 作为参数，然后通过它来实现事件的传递。

• 提问者 qq_杨小姐好萌啊_0 #1

  老师， 我理解你说的这个emitter是一个发布订阅模式。 但是这个我想了下， 可以实现同一框架不同组件的通信， 我这里的背景是跨框架了。 其实我还是没理解。 跨框架如何传递一个通用的emitter

• 张轩 回复 提问者 qq_杨小姐好萌啊_0 #2

  emitter 它就是 object 对象，和什么框架没有关系的，只要是支持标准es6 modules  import/export 的框架（现在都支持）都可以对它进行导入，然后就可以使用了。