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'})