专栏首页前端充电站【Vue进阶】手把手教你在 Vue 中使用 JSX

【Vue进阶】手把手教你在 Vue 中使用 JSX

JSX 是什么

JSX 是一种 Javascript 的语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 的这个特性,所以他即具备了 Javascript 的灵活性,同时又兼具 html 的语义化和直观性

为什么要在 Vue 中使用 JSX

有时候,我们使用渲染函数(render function)来抽象组件,渲染函数不是很清楚的参见官方文档[1], 而渲染函数有时候写起来是非常痛苦的,如下所示:

createElement(
  'anchored-heading', {
    props: {
      level: 1
    }
  }, [
    createElement('span', 'Hello'),
    ' world!'
  ]
)

其对应的模板是下面:

<anchored-heading :level="1">
  <span>Hello</span> world!
</anchored-heading>

这显然是吃力不讨好的,这个时候就派上 JSX 上场了。在 Vue 中使用 JSX,需要使用 Babel 插件[2],它可以让我们回到更接近于模板的语法上,接下来就让我们一起开始在 Vue 中写 JSX

开始

快读使用 vue-cli 创建一个 Vue 项目:

# 直接回车即可
vue create vue-jsx

安装依赖:

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

配置 .babelrc

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    '@vue/babel-preset-jsx'
  ]
}

在开发的过程中,遇到了一个问题,

Duplicate declaration "h" (This is an error on an internal node. Probably an internal error.) 

可以将配置改成:

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ['@vue/babel-preset-jsx',
      {
        'injectH': false
      }]
  ]
}

基础内容

这里展示在 Vue 中书写一些基础内容,包括纯文本、动态内容、标签使用、自定义组件的使用,这些跟我们平时使用单文件组件类似,如下所示:

注意:JSX的顶层只能有一个根元素

render() {
  return (
    <div>
      <h3>内容</h3>
      {/* 纯文本 */}
      <p>hello, I am Gopal</p>
      {/* 动态内容 */}
      <p>hello { this.msg }</p>
      {/* 输入框 */}
      <input />
      {/* 自定义组件 */}
      <myComponent></myComponent>
    </div>
  );
}

Attributes/Props

固定的 Attributes 的绑定跟普通的 HTML Attributes 结构一样

render() {
  return <div><input placeholder="111" /></div>
}

注意,如果是动态属性,之前是 v-bind:placeholder="this.placeholderText" 变成了placeholder={this.placeholderText},如下所示

render() {
  return <input
            type="email"
            placeholder={this.placeholderText}
          />
}

我们也可以展开一个对象

render (createElement) {
    return (
        <button {...this.largeProps}></button>
    )
}

input 标签,就可以如下批量绑定属性

const inputAttrs = {
    type: 'email',
    placeholder: 'Enter your email'
};
render() {
  return <input {...{ attrs: inputAttrs }} /> 
}

插槽

插槽的入门可以看下我的另外一篇文章【Vue 进阶】从 slot 到无渲染组件[3]

我们来看下怎么使用 JSX 实现具名插槽和作用域插槽

具名插槽:父组件的写法和单文件组件模板的类似,通过 slot="header" 这样方式指定要插入的位置。子组件通过 {this.$slots.header} 方式指定插槽的名称,其中 header 就是插槽的名称,父子组件需要一一对应

注意:这里不能使用 v-slot 指令

父组件:

render() {
  {/* 具名插槽  */}
  <myComponent>
    <header slot="header">header</header>
    <header slot="content">content</header>
    <footer slot="footer">footer</footer>
  </myComponent>
}

子组件:

render() {
  return (
    <div>
      {/* 纯文本 */}
      <p>我是自定义组件</p>
      {this.$slots.header}
      {this.$slots.content}
      {this.$slots.footer}
    </div>
  );
}

作用域插槽:子组件中通过 {this.$scopedSlots.test({ user: this.user })} 指定插槽的名称是 test,并将 user 传递给父组件。父组件在书写子组件标签的时候,通过 scopedSlots 值指定插入的位置是 test,并在回调函数获取到子组件传入的 user

注意:作用域插槽是写在子组件标签中的,类似属性。而不是像具名插槽放在标签内部

父组件:

render() {
  {/* 具名插槽 作用域插槽 */}
  <myComponent {
    ...{
      scopedSlots: {
        test: ({user}) => (
          <div>{user.name}</div>
        )
      }
    }
  }>
  </myComponent>
}

子组件:

render() {
  return (
    <div>
      {this.$scopedSlots.test({
        user: this.user
      })}
    </div>
  );
}

指令

常见的指令如下所示:

render() {
  {/* 指令 */}
  {/* v-model */}
  <div><input vModel={this.newTodoText} /></div>
  {/* v-model 以及修饰符 */}
  <div><input vModel_trim={this.tirmData} /></div>
  {/* v-on 监听事件 */}
  <div><input vOn:input={this.inputText} /></div>
  {/* v-on 监听事件以及修饰符 */}
  <div><input vOn:click_stop_prevent={this.inputText} /></div>
  {/* v-html */}
  <p domPropsInnerHTML={html} />
}

函数式组件

函数式组件是一个无状态、无实例的组件,详见官网说明[4],新建一个 FunctionalComponent.js 文件,内容如下:

export default ({ props }) => <p>hello {props.message}</p>

父组件中调用如下:

import funComponent from './FunctionalComponent'

...

render() {
  return {/* 函数式组件 */}
        <funComponent message="Gopal"></funComponent>
}

总结

本文主要介绍了为什么要在 Vue 中使用 JSX,以及如何在 Vue 中使用 JSX

本文所有的例子都在这里 github 地址[5],这么走心,求个赞呗~

总体而言,在 Vue 2.X 的版本中写 JSX 是有点吃力不讨好的,会踩很多坑....期待 Vue3

希望对大家有所帮助~

往期优秀文章推荐

  • 【Vue进阶】——如何实现组件属性透传?[6]
  • 前端应该知道的 HTTP 知识【金九银十必备】[7]
  • 最强大的 CSS 布局 —— Grid 布局[8]
  • 如何用 Typescript 写一个完整的 Vue 应用程序[9]
  • 前端应该知道的web调试工具——whistle[10]

参考

Babel Preset JSX[11]

Vue 官方文档[12]

学会使用 Vue JSX, 一车老干妈都是你的[13]

如何在 Vue 中使用 JSX 以及使用它的原因[14]

参考资料

[1]

官方文档: https://cn.vuejs.org/v2/guide/render-function.html#createElement-%E5%8F%82%E6%95%B0

[2]

插件: https://github.com/vuejs/jsx

[3]

【Vue 进阶】从 slot 到无渲染组件: https://juejin.im/post/6869537683736100871

[4]

官网说明: https://cn.vuejs.org/v2/guide/render-function.html#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6

[5]

github 地址: https://github.com/GpingFeng/vue-jsx

[6]

【Vue进阶】——如何实现组件属性透传?: https://juejin.im/post/6865451649817640968

[7]

前端应该知道的 HTTP 知识【金九银十必备】: https://juejin.im/post/6864119706500988935

[8]

最强大的 CSS 布局 —— Grid 布局: https://juejin.im/post/6854573220306255880

[9]

如何用 Typescript 写一个完整的 Vue 应用程序: https://juejin.im/post/6860703641037340686

[10]

前端应该知道的web调试工具——whistle: https://juejin.im/post/6861882596927504392

[11]

Babel Preset JSX: https://github.com/vuejs/jsx#installation

[12]

Vue 官方文档: https://cn.vuejs.org/v2/guide/render-function.html#JSX

[13]

学会使用 Vue JSX, 一车老干妈都是你的: https://xie.infoq.cn/article/6af7782f35bfe69f25548470e

[14]

如何在 Vue 中使用 JSX 以及使用它的原因: https://juejin.im/post/6844904061930586125

本文分享自微信公众号 - 前端杂货铺(gh_9013e08e595a),作者:Gopal

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-09-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue 组件开发实践之 scopedSlot 的传递

    在使用Vue开发我们的vhtml-ui的组件库的过程中遇到了组件嵌套组件时需要传递scopedSlot的情况,官方的文档和教程目前还没有比较明确的指引,所以摸着...

    谭伟华
  • 最有效、最全的Vue 2.0 学习路线,各个阶段适用

    对于我这种从0.x版本就开始体验 vuejs 的人来说,当然不算难,那时候没各种脚手架和复杂搭配,仅仅是一个mvvm的解决方案库而已,解决了jq带来的繁琐操作d...

    一墨编程学习
  • Vue3中不止composition-api,其他的提案(RFC)也很精彩。

    最近一段时间,Vue3带来的新能力composition-api带来了比较大的轰动,虽然是灵感是源React Hook,但是在很多方面却超越了它。但是除了com...

    ssh_晨曦时梦见兮
  • 手把手教你在vue-cli3中配置eslint

    前端老鸟
  • 学点vue.js的东西,什么都得学点,面试时说不定对方会问什么

    说vue呢也是关注视图层的框架,它嫌react太绕了,redux太麻烦了,然后就说自己很简单,说自己还有双向绑定,好的很,不是小好,是大好。那我今天就写点vue...

    web前端教室
  • 一个合格的中级前端工程师应该掌握的 20 个 Vue 技巧

    之前写过一篇文章,关于 Vue 属性透传的,文章中我列举了很多种方法去实现属性透传。其中包括直接设置 props,v-bind="$attrs",render ...

    GopalFeng
  • 拥抱 Vue 3 系列之 JSX 语法

    “别再更新了,学不动了”。这句话不知道出了多少开发者的辛酸。在过去的一年中,Vue 团队一直都在开发 Vue.js 的下一个主要版本,就在 6 月底,尤大更新同...

    政采云前端团队
  • 新手向:Vue 2.0 的建议学习顺序

    时见疏星
  • 瑜亮之争:Vue与React的差异

    在 React 和 Vue 之间存在许多相似性。Vue 的设计理念充分汲取了 Angular 和 React 的优点并将它们结合起来,所以如果你真的特别喜欢 R...

    用户1682855
  • 在Vue 3中使用JSX

    各位同学下午好,我是来自字节跳动大力智能前端团队的林成璋,最近半年的业余时间(再加上一些摸鱼的时间)主要在维护 Vue 3 的 Babel JSX Plugin...

    公众号@魔术师卡颂
  • 探索 Vue 3 中的 JSX

    本文为 Vue Conf 2021 分享内容。 分享者:林成璋,目前就职于 字节跳动 大力智能前端 团队

    前端迷
  • 探索 Vue 3 中的 JSX

    各位同学下午好,我是来自字节跳动大力智能前端团队的林成璋,最近半年的业余时间(再加上一些摸鱼的时间)主要在维护 Vue 3 的 Babel JSX Plugin...

    用户4456933
  • React + webpack 开发单页面应用简明中文文档教程(六)渲染一个列表,初识 jsx 文件

    版权声明:本文为 FengCms FungLeo 原创文章,允许转载,但转载必须注明出处并附带首发链接 ...

    FungLeo
  • 前端 vue 在可视化大屏领域的工作实践

    来这个公司的原因是因为我觉得这个公司属于偏初创公司,有一定的规模,有一定的挑战性,比大厂工作更加忙碌一些,我以前在一家国内互联网外包巨头行业工作,感觉比较闲,就...

    孙叫兽
  • 2020最新编辑器集成eslint、prettier、stylelint,git提交预检查代码配置

    webstorm设置搜eslintr、eslint、stylelint,如果没有,搜plugin,安装prettier、eslint、stylelint

    蓓蕾心晴
  • 如何运行vue项目(维护他人的项目)

    前提: 首先,这个教程主要针对vue小白,并且不知道安装node.js环境的。言归正传,下面开始教程:在维护项目之前,需要把所有的环境搭建好,这里我就不多说了...

    王小婷
  • Announcing Vue.js 2.0

    时见疏星
  • vue-cli 脚手架中 webpack 配置基础文件详解

    vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用,它使得我...

    前端教程
  • Angular React Vue我应该选择什么?

    为 web 应用选择 JavaScript 开发框架是一件很费脑筋的事。现如今 Angular 和 React 非常流行,并且最近出现的新贵 VueJS 同样博...

    gemron的空间

扫码关注云+社区

领取腾讯云代金券