vue JSX

JSX 是什么

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

为什么要在 Vue 中使用 JSX

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

:level="1">
  >Hello> world!
>

这显然是吃力不讨好的，这个时候就派上 JSX 上场了。在 Vue 中使用 JSX，需要使用 Babel 插件，它可以让我们回到更接近于模板的语法上，接下来就让我们一起开始在 Vue 中写 JSX 吧

开始

快读创建一个 Vue 项目，直接使用 vue-cli 创建一个项目：

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

配置 .babelrc ：

render() {
  return (
    >
      >内容</h3>
      {/* 纯文本 */}
      >hello, I am Gopal</p>
      {/* 动态内容 */}
      >hello { this.msg }</p>
      {/* 输入框 */}
      />
      {/* 自定义组件 */}
      ></myComponent>
    </div>
  );
}

Attributes/Props

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

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

我们也可以展开一个对象

const inputAttrs = {
    type: 'email',
    placeholder: 'Enter your email'
};
render() {
  return {...{ attrs: inputAttrs }} /> 
}

插槽

插槽的入门可以看我的另外一篇文章

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

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

父组件：

render() {
  return (
    >
      {/* 纯文本 */}
      >我是自定义组件</p>
      {this.$slots.header}
      {this.$slots.content}
      {this.$slots.footer}
    </div>
  );
}

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

父组件：

render() {
  return (
    >
      {this.$scopedSlots.test({
        user: this.user
      })}
    </div>
  );
}

指令

常见的指令如下所示：

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

父组件中调用如下:

import funComponent from './FunctionalComponent'

...

render() {
  return {/* 函数式组件 */}
        ="Gopal"></funComponent>
}

总结

本文主要介绍了为什么要在 Vue 中使用 JSX，以及如何在 Vue 中使用 JSX

希望对大家有所帮助~

作者：Gopal
链接：https://www.jianshu.com/p/9616745a8d0a
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。