【Vue进阶】手把手教你在 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 (
    

内容

{/* 纯文本 */}

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
footer
}

子组件:

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 以及使用它的原因

你可能感兴趣的:(【Vue进阶】手把手教你在 Vue 中使用 JSX)