vue中使用jsx

在了解jsx之前需要理解vue的render函數

Render函數

為什么要使用render函數，因為它比template更接近編譯器，某些場景下，template會有些冗余

例如：

<template type="text/x-template">
    <div>
        <h1 v-if="level===1"><slot/></h1>
        <h2 v-if="level===2"><slot/></h1>
        <h3 v-if="level===3"><slot/></h1>
        <h4 v-if="level===4"><slot/></h1>
        <h5 v-if="level===5"><slot/></h1>
        <h6 v-if="level===6"><slot/></h1>
    </div>
</template>    

<script>
    Vue.component('anchored-heading',{
        template: '#id',
        props: {
            level:{type:Number,required:true}
        }
    })
</script>

　　我們嘗試用render函數來重寫上面的例子：

<script>
    Vue.component('anchored-heading',{
        render:function (createElement) {
            return createElement('h'+this.level,this.$slots.default)
        },
        props: {
            level:{
                type: Number,
                requires:true,
            }
        }
    })
</script>

　　明顯：代碼精簡了很多！

createElement()參數

　　{一個HTML標簽，組件設置，一個函數}

　　createElement接受的參數有：

• 　第一個參數：'div'：一個HTML標簽 {String | Object | Function}
•     第二個參數：一個對應屬性的數據對象 {Object}
•     第三個參數：子節點(VNodes)   {String | Array}：[createElement('h1','hello world),createElement(MyComponent,{props: {comeProp: 'foo'}}),'bar']

createElement的完整數據對象

    {
        // 和`v-bind:class`一樣的API
        'class': {
            foo: true,
            bar: false,
        },
        // 和`v-bind:style`一樣的API
        style: {
            color: 'red',
            fontSize: '14px',
        },
        //正常的HTML特性
        attrs: {
            id: 'foo'
        },
        // 組件 props
        props: {
            myProp: 'bar'
        },
        // DOM屬性
        domProps: {
            innerHTML: 'bara'
        },
        // 事件監聽器 基於 "on"
        on: {
            click: this.clickHandler
        },
        // 僅對於組件，用於監聽原生事件，而不是組件使用vm.$emit觸發的事件
        nativeOn: {
            click: this.nativeClickHandler
        },
        // 自定義指令，注意事項：不能對綁定的舊值設值
        directives: [
            {
                name: 'my-custom-directive',
                value: '2',
                expression: '1+1'，
                arg: 'foo',
                modifiers: {
                    bar: true,
                }
            }
        ],
        // 如果子組件有定義slot的名稱
        slot: 'name-of-slot',
        key: 'myKey',
        ref: 'myRef',
    }

約束

　　VNodes必須唯一

　　所有組件樹中的VNodes必須唯一。這意味着，下面的render function是無效的。

    render: function(createElement) {
        let myParagraphVNode = createElement('p','h1')
        return createElement('div',[
            myParagraphVNode, myParagraphVNode
        ])
    }

　　如果有很多需要重復的元素/組件，可以使用工廠函數來實現。

    render: function (createElement) {
        return createElement('div', Array.apply(null,{length:20}).map(function() {
            return createElement('p','h1')
        }))
    }

JSX

　　如果寫了很多render函數，會很痛苦。又有一個Babel插件，支持我們在vue中使用JSX語法，讓我們回到更接近於模板的語法上。

　　

　　　　<script type="javascript/jsx">
   　　　　 export default {
     　　　　   name: 'index',
      　　　　  data() {
      　　　　    return {
      　　　　      demo: "hello"
      　　　　    }
      　　　　  },
       　　　　 render:function(h) {
        　　　　  return (
         　　　　   <div>
          　　　　    {this.isShow? (
            　　　　    <h2>isShow</h2>
            　　　　  ) : (
              　　　　  <h2>asdas</h2>
            　　　　  )}
             　　　　 <p>Hello</p>
         　　　　   </div>
        　　　　  )
      　　　　  }
    　　　　}
　　　　</script>

　　

具名插槽使用方法：

scopedSlots和slots

如果是具名插槽使用slots: {slotsName: EmptySlots} h('el-options', {slot: 'slotName'})