【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
- Golang笔记——并发
- UWP基础教程 - XAML标记扩展
- UWP基础教程 - RelativePanel
- UWP基础教程 - AuotmationProperties.Name
- 暴力遍历还没注册的双拼域名
- JRuby——Java和Ruby的强强联合
- Golang语言关于零值的定义
- 使用Yeoman创建ASP.NET Core项目
- Golang语言捕获panic异常并转化为error
- 在Windows下安装TensorFlow
- JavaFX——(第一篇:介绍篇)
- 自编码器是什么?有什么用?这里有一份入门指南(附代码)
- UWP基础教程 - {x:DeferLoadStrategy}
- UWP基础教程 - 重启应用
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 将linux终端的输出信息保存到log中
- UNIX网络编程卷1(第三版)一个简单的时间获取服务器的程序
- Python数据分析实战(3)Python实现数据可视化
- xresloader转表工具链增加了一些新功能(map,oneof支持,输出矩阵,基于模板引擎的加载代码生成等)
- 数据结构之树
- UNIX网络编程卷1(第三版)套接字编程简介
- UNIX网络编程卷1(第三版)readn,writen和readline函数
- UNIX网络编程卷1(第三版)基本TCP套接字编程
- Ubuntu下linux映射共享盘到window下方法
- 数据同步写入磁盘:sync
- 惯用的关机命令:shutdown
- 重启、关机:reboot,halt,poweroff
- 使用Docker构建ZooKeeper镜像
- Linux进程间的通信
- 如何使用jMeter对需要CSRF token验证的OData服务进行并发性能测试