如何在 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!' ])

其对应的模板是下面：

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的资料请关注其它相关文章！

• 为什么推荐使用JSX开发Vue3
• Vue 3.0中jsx语法的使用
• vue+render+jsx实现可编辑动态多级表头table的实例代码
• 在 Vue 中使用 JSX 及使用它的原因浅析
• Vue中jsx不完全应用指南小结
• 在vue中使用jsx语法的使用方法
• vue组件jsx语法的具体使用
• vue jsx 使用指南及vue.js 使用jsx语法的方法
• 详解Vue如何支持JSX语法
• 详解如何使用webpack在vue项目中写jsx语法
• 详解利用jsx写vue组件的方法示例

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！