如何在Vue中使用JSX

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 (

Attributes/Props

Attributes 的绑定跟普通的 HTML 结构⼀样

render() {

return

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

render() { return placeholder={this.placeholderText} />}

我们也可以展开⼀个对象

render (createElement) { return (

)}

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

const inputAttrs = { type: 'email',

placeholder: 'Enter your email'};

render() {

return }

插槽

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

具名插槽：⽗组件的写法和单⽂件组件模板的类似，通过 slot=\"header\" 这样⽅式指定要插⼊的位置。⼦组件通过this.$slots.header ⽅式指定插槽的名称，其中 header 就是插槽的名称⽗组件：

render() {

{/* 具名插槽 */}

⼦组件：

render() { return (

}

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

render() {

{/* 具名插槽 作⽤域插槽 */} scopedSlots: { test: ({user}) => (

⼦组件：

render() { return (

指令

常见的指令如下所⽰：

render() { {/* 指令 */} {/* v-model */}

}

函数式组件

函数式组件是⼀个⽆状态、⽆实例的组件，详见官⽹说明，新建⼀个 FunctionalComponent.js ⽂件，内容如下：

export default ({ props }) =>

hello {props.message}

⽗组件中调⽤如下:

import funComponent from './FunctionalComponent'...

render() {

return {/* 函数式组件 */}

}

以上就是如何在 Vue 中使⽤ JSX的详细内容，更多关于Vue 中使⽤ JSX的资料请关注其它相关⽂章！