vue-jsx写法笔记

jsx语法不是很常用，部分语法和平时写template有点不太一样，用到的时候可能会忘记，官网的文档又特别简单，这里整理一下常用的一些语法含义，方便以后使用。

 

vue的jsx基础插件依赖（高版本cli已经自带，无需再次安装了）。

• babel-plugin-syntax-jsx: 提供对 jsx 语法的基本支持，这个并非由 vue 提供和维护，react 也依赖于这个插件
• babel-helper-vue-jsx-merge-props: 提供了 vue 属性合并的工具函数，用于支持 jsx 里的 spread 语法, 即 ... 语法
• babel-plugin-transform-vue-jsx: vue template 编译成 render 函数的核心插件

下面对一些template转为jsx语法时的一些比较好的方式进行记录：

domProps

 

诸如 innerHTML href title 等等，BOM环境的标签属性需要加个domProps前缀。

render () {
  return (
    
  )
}

 v-if

JSX语法：

  render() {
    return (
      

        {
          this.hello && (
            
hello
          )
        }
      
    )
  }

v-if  v-else-if  v-else

JSX用三元表达符替代（目前想到最好的方法）：

  render() {
    return (
      

        {
          this.hello ? (
           
content1
          )
          : this.hello2 ? (
            
 content2 
          )
          : (
            
 content3 
          )
        }
      
    )
  }

v-for

JSX语法（和官方文档一致）

  render() {
    return (
      

        

          {
            this.items.map(item => (
              
{ item.name }
            ))
          }
        
      
    )
  }

slot

slot 是挂在 this.$slots 的这个属性上的，this.$slot['property'] 可以直接拿到 slot 的 vNode

// Wrapper.vue
  render() {
    return (
      

        I am a component
        {
          this.$slots.default
        }
        {
          this.$slots.otherSlot
        }
      
    )
  }

  // main.vue
  render() {
    return (
      
        
I am the slot
        
I am the other slot
      
    )
  }

scope-slot

scopedSlot 是挂在 this.$scopedSlots 的这个属性上的，this.$scopedSlots['property'] 可以直接拿到一个函数，这个函数的参数就是 scopeSlots 外传的数据，返回值是 VNode.

所以，jsx 中，通过访问 this.$scopedSlots 来代替 slot 的定义，通过传递 scopedSlots 属性来使用 scopedSlots.

  // Wrapper.vue
  render() {
    return (
      

        {
          this.$scopedSlots.default({
            data: this.data
          })
        }
      
    )
  }

  // main.vue
  render() {
    return (
       {
            return (
              
{ data }
            )
          }
        }
      }}>
      
    )
  }

listeners

event-emitter 这个组件会 emit 4个事件 click, click-two, test-event, test-event-two,  camelCaseEvent. 使用 template 时， 我们用 v-on，或者其缩写 @, 来监听事件.

使用 jsx 时，情况比较多：

使用 on-[eventName] 格式, 比如 on-click-two, on-click, on-camelCaseEvent
使用 on[eventName] 格式，比如 onClick, onCamelCaseEvent。click-two 需要这样写  onClick-on， onClickTwo 是不对的。
使用 spread 语法，即 {...{on: {event: handlerFunction}}}

render () {
  return (
    
    
  )
}

这里的代码只是为了展示，这样的场景，全部都写在 spread 语法里，最为简洁。 我建议，如果事件多就使用 spread 语法，如果少就使用 on-[eventName] 的格式来写。on[eventName] 格式很奇怪容易搞错，最好不要用。

v-model  sync

所以JSX很简单：

render() {
  return (
     { this.test = val } }
    >
    
  )
}

或者使用 babel-plugin-jsx-v-model插件，就可以跟普通写法一样。

render() {
  return (
    
    
  )
}

sync同理，babel-plugin-vue-jsx-sync插件来处理 sync 修饰符，插件写法略有不同：

render() {
  return (
    
    
  )
}

还有一个babel-plugin-jsx-event-modifiers插件，可以处理处理 .ctrl, .alt, .shift 等事件语法糖，具体可以查看文档，这里要感谢作者nickmessing

$attrs  $listeners

export default {
  data () {
    return {
      rootValue: 'root'
    }
  },
  methods: {
    changeRootValue (val) {
      this.rootValue = val
    }
  }
}

// Parent.vue
// 没有声明props
render() {
  return (
    
  )
}

// Child.vue
export default {
  render () {
    return (
      

        { this.$attrs.titleSlot }
        { this.$slots.default }
      
    )
  },
  methods: {
    onClick () {
      this.$listeners['change-root-value']('child')
    }
  }
}