如何在 Vue 中使用 JSX

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

有时候，我们使用渲染函数（render function）来抽象组件，渲染函数不是很清楚的参见官方文档, 而渲染函数有时候写起来是非常痛苦的

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

其对应的模板是下面：

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

这显然是吃力不讨好的，这个时候就派上 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 ( <div> <h3>内容</h3> {/* 纯文本 */} <p>hello, I am Gopal</p> {/* 动态内容 */} <p>hello { this.msg }</p> {/* 输入框 */} <input /> {/* 自定义组件 */} <myComponent></myComponent> </div> );}Attributes/Props

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

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 }} /> }插槽

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

具名插槽：父组件的写法和单文件组件模板的类似，通过 slot='header' 这样方式指定要插入的位置。子组件通过 this.$slots.header 方式指定插槽的名称，其中 header 就是插槽的名称

父组件：

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} />}函数式组件

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

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

父组件中调用如下:

import funComponent from ’./FunctionalComponent’...render() { return {/* 函数式组件 */} <funComponent message='Gopal'></funComponent>}

以上就是如何在 Vue 中使用 JSX的详细内容，更多关于Vue 中使用 JSX的资料请关注好吧啦网其它相关文章！