Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(h5): 临时修复 #7329:Vue3 H5 中使用 render 函数渲染节点时, onTap 不能触发点击事件 #7699

Closed
wants to merge 4 commits into from

Conversation

b2nil
Copy link
Collaborator

@b2nil b2nil commented Sep 22, 2020

这个 PR 做了什么? (简要描述所做更改)

@tarojs/components/dist-h5/vue3 中通过 app.component 注册为全局组件的所有组件导出,以便开发者采用Vue 3.0 的 render 函数渲染组件时,按需引用。

这能临时解决使用 render 函数渲染节点(如: h('taro-view') 或 h('taro-view-core'))时, 不能触发 onTap 的问题。

这个 PR 是什么类型? (至少选择一个)

这个 PR 满足以下需求:

  • 提交到 master 分支
  • Commit 信息遵循 Angular Style Commit Message Conventions
  • 所有测试用例已经通过
  • 代码遵循相关包中的 .eslintrc, .tslintrc, .stylelintrc 所规定的规范
  • 在本地测试可用,不会影响到其它功能

这个 PR 涉及以下平台:

  • 微信小程序
  • 支付宝小程序
  • 百度小程序
  • 头条小程序
  • QQ 轻应用
  • 快应用平台(QuickApp)
  • Web 平台(H5)
  • 移动端(React-Native)

其它需要 Reviewer 或社区知晓的内容:

引入组件后, 若采用这种写法: h(Button, { class: 'btn' }, 'Button Text'),
浏览器会由关于函数式插槽的提示:

[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance. 

所以采用 render 函数渲染组件时,推荐的写法是

// 可在 wepback 中设置 `alias`, 将 `'@tarojs/components$'`
// 指向 `'@tarojs/components/dist-h3/vue3/index.js'`
import { Button } from '@tarojs/components/dist-h3/vue3'

export default {
  setup(){
    return () => (
      h(Button, {
        class: 'btn'
      } { default: () => [
        'Button Text'
      ]})
    )
  }
}

h5 Webpack 编译配置:

webpackChain(chain) {
  chain.resolve.alias
     .set('@tarojs/components$', path.resolve(__dirname, '..','node_modules/@tarojs/components/dist-h5/vue3/index.js'))
     .set('@tarojs/components/dist/taro-components/taro-components.css', path.resolve(__dirname, '..','node_modules/@tarojs/components/dist/taro-components/taro-components.css'))
}

@Chen-jj Chen-jj added the V-3 Version - 3.x label Sep 24, 2020
@Chen-jj Chen-jj self-requested a review September 24, 2020 11:54
@b2nil
Copy link
Collaborator Author

b2nil commented Sep 26, 2020

抱歉, 使用 render 函数渲染通过 app.component 注册的组件, 需要使用 resolveComponent 方法: h(resolveComponent('taro-view')), 而不是直接渲染标签: h('taro-view')

先关闭这个 PR。

@b2nil b2nil closed this Sep 26, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
V-3 Version - 3.x
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants