JSX 是什么
JSX
是一种 Javascript
的语法扩展,JSX = Javascript + XML
,即在 Javascript
里面写 XML
,因为 JSX
的这个特性,所以他即具备了 Javascript
的灵活性,同时又兼具 html
的语义化和直观性
为什么要在 Vue 中使用 JSX
有时候,我们使用渲染函数(render function
)来抽象组件,渲染函数不是很清楚的参见官方文档, 而渲染函数有时候写起来是非常痛苦的
createElement(
'anchored-heading', {
props: {
level: 1
}
}, [
createElement('span', 'Hello'),
' world!'
]
)
其对应的模板是下面:
Hello world!
这显然是吃力不讨好的,这个时候就派上 JSX
上场了。在 Vue
中使用 JSX
,需要使用 Babel
插件,它可以让我们回到更接近于模板的语法上,接下来就让我们一起开始在 Vue
中写 JSX
吧
开始
快读创建一个 Vue 项目,直接使用 vue-cli
创建一个项目:
# 直接回车即可
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',
{
'injectH': false
}]
]
}
基础内容
这里展示在 Vue
中书写一些基础内容,包括纯文本、动态内容、标签使用、自定义组件的使用,这些跟我们平时使用单文件组件类似,如下所示:
render() {
return (
内容
{/* 纯文本 */}
hello, I am Gopal
{/* 动态内容 */}
hello { this.msg }
{/* 输入框 */}
{/* 自定义组件 */}
);
}
Attributes/Props
Attributes
的绑定跟普通的 HTML
结构一样
render() {
return
}
注意,如果动态属性,之前是 v-bind:placeholder="this.placeholderText"
变成了placeholder={this.placeholderText}
render() {
return
}
我们也可以展开一个对象
render (createElement) {
return (
)
}
像 input
标签,就可以如下批量绑定属性
const inputAttrs = {
type: 'email',
placeholder: 'Enter your email'
};
render() {
return
}
插槽
插槽的入门可以看我的另外一篇文章
我们来看下怎么实现具名插槽和作用域插槽
具名插槽:父组件的写法和单文件组件模板的类似,通过 slot="header"
这样方式指定要插入的位置。子组件通过 this.$slots.header
方式指定插槽的名称,其中 header
就是插槽的名称
父组件:
render() {
{/* 具名插槽 */}
header
content
}
子组件:
render() {
return (
{/* 纯文本 */}
我是自定义组件
{this.$slots.header}
{this.$slots.content}
{this.$slots.footer}
);
}
作用域插槽:子组件中通过 {this.$scopedSlots.test({ user: this.user })}
指定插槽的名称是 test
,并将 user
传递给父组件。父组件在书写子组件标签的时候,通过 scopedSlots
值指定插入的位置是 test
,并在回调函数获取到子组件传入的 user
值
父组件:
render() {
{/* 具名插槽 作用域插槽 */}
(
{user.name}
)
}
}
}>
}
子组件:
render() {
return (
{this.$scopedSlots.test({
user: this.user
})}
);
}
指令
常见的指令如下所示:
render() {
{/* 指令 */}
{/* v-model */}
{/* v-model 以及修饰符 */}
{/* v-on 监听事件 */}
{/* v-on 监听事件以及修饰符 */}
{/* v-html */}
}
函数式组件
函数式组件是一个无状态、无实例的组件,详见官网说明,新建一个 FunctionalComponent.js
文件,内容如下:
export default ({ props }) => hello {props.message}
父组件中调用如下:
import funComponent from './FunctionalComponent'
...
render() {
return {/* 函数式组件 */}
}
总结
本文主要介绍了为什么要在 Vue
中使用 JSX
,以及如何在 Vue
中使用 JSX
希望对大家有所帮助~
参考
Babel Preset JSX
Vue 官方文档
学会使用 Vue JSX, 一车老干妈都是你的
如何在 Vue 中使用 JSX 以及使用它的原因