时间戳

首页 > 解决方案 > 将 Vue v2 代码移植到 v3。与 V3 中类似的 _b _t 编译器命令是什么？

javascript - 将 Vue v2 代码移植到 v3。与 V3 中类似的 _b _t 编译器命令是什么？

问题描述

我目前正在 vue3 中开发一个项目，并一直在尝试将此 vue 组件https://github.com/David-Desmaisons/Vue.D3.tree移植到混合成功。

该代码是为 V2 vue 编写的，并且在其渲染主体中具有一些有趣的低级编译器调用：

https://github.com/David-Desmaisons/Vue.D3.tree/blob/7c5ca9612fe0af904ecdd2c2d552cfc6be39eb45/src/Tree.vue#L182

有问题的代码是：

render (h) {
    const {$behaviorProps: behaviorProps, $scopedSlots: {popUp}, resetPopUp: close, contextMenu: {node, style}} = this
    const slotNodes = defaultBehaviors.map(component => h(component, this._b({}, component.name, behaviorProps, false)))
    const menu = h('div', {
      class: popUpClass,
      style
    }, [
      (!popUp || (node === null)) ? null : popUp({node, data: node.data, close})
    ])
    return h('div', {class: 'viewport treeclass', directives: [{name: 'resize', value: this.resize}]}, [
      menu,
      this._t('behavior', slotNodes, null, behaviorProps)
    ])
  },

即this._b通话和this._t通话。

我知道这_b是一个绑定调用并且_t与插槽有关，但我不确定它们在 vue3 API 中转换为什么？

我在这里使用 react 反编译器发现了这一点：https : //template-explorer.vuejs.org/ 并尝试了一些代码块，可以看到转换成的内容。

另外我注意到h传入的参数不再起作用，并将其删除以代替使用，并从 Vue3this调用该函数。h()这是正确的做法吗？

如果有人能指出我正确的方向，我将不胜感激。我已经查看了 vue3 文档，但我认为通常情况下大多数使用普通组件的开发人员都不会尝试过这种事情。我认为这用于重新附加 D3 引擎在根 div 组件/SVG 块上的渲染所需的行为和处理程序。

标签： javascriptvue.jsd3.jsvuejs2vue-component

解决方案

推荐阅读