今天在用elementUI 的時(shí)候，table的頭部是有顏色小格子的伙单，那么就需要去自定義table的頭部获高，table組件提供了render-header函數(shù)，顏色格子一定要用到標(biāo)簽吻育，發(fā)現(xiàn)直接return 出去帶有標(biāo)簽的字符串是解析不了的念秧，搜了下，發(fā)現(xiàn)需要用到createElement <el-table>表頭內(nèi)插入 HTML 標(biāo)簽布疼？跟著這個(gè)issues嘗試了createElement 的使用摊趾，
第一個(gè)參數(shù)為一個(gè) HTML 標(biāo)簽字符串，組件選項(xiàng)對(duì)象游两，后面兩個(gè)參數(shù)為數(shù)據(jù)或者對(duì)象砾层，兩個(gè)順序可以隨意，
如果是一個(gè)HTML標(biāo)簽的話贱案，
{
attrs:{
class:"beauty",
style:""
}
}
參數(shù)為字符串的話會(huì)將后面的{}設(shè)置覆蓋掉肛炮，字符串就是innerText屬性。
domProps: {
innerHTML: 'dddd'
},
最后一個(gè)參數(shù)為數(shù)組宝踪，里面存放的就是子組件
jsx的優(yōu)勢(shì)：
今天看了elementUI的pagination組件發(fā)現(xiàn)里面的事件寫法很奇怪侨糟，on-click={ this.$parent.prev }>是這么寫的，在react中是駝峰命名法瘩燥，于是查閱vue古方文檔里面的render函數(shù)章節(jié)秕重，發(fā)現(xiàn)里面并沒有on-click這種寫法，還有一點(diǎn)比較奇怪厉膀，render函數(shù)沒有返回vnode組件（就是沒有使用createElement）悲幅，而是直接返回了HTML字符串。
pagination.js
render(h) {
let template = <div class='el-pagination'></div>;
const layout = this.layout || '';
if (!layout) return;
const TEMPLATE_MAP = {
prev: <prev></prev>,
jumper: <jumper></jumper>,
pager: <pager currentPage={ this.internalCurrentPage } pageCount={ this.internalPageCount } on-change={ this.handleCurrentChange }></pager>,
next: <next></next>,
sizes: <sizes pageSizes={ this.pageSizes }></sizes>,
slot: <my-slot></my-slot>,
total: <total></total>
};
const components = layout.split(',').map((item) => item.trim());
const rightWrapper = <div class="el-pagination__rightwrapper"></div>;
let haveRightWrapper = false;
if (this.small) {
template.data.class += ' el-pagination--small';
}
components.forEach(compo => {
if (compo === '->') {
haveRightWrapper = true;
return;
}
if (!haveRightWrapper) {
template.children.push(TEMPLATE_MAP[compo]);
} else {
rightWrapper.children.push(TEMPLATE_MAP[compo]);
}
});
if (haveRightWrapper) {
template.children.push(rightWrapper);
}
return template;
},
里面的子組件也是直接返回HTML字符串的
原來這是jsx的語法站蝠，使用了babel-plugin-transform-vue-jsx去支持jsx語法，在這個(gè)庫(kù)中看到
render (h) {
return (
<div
// normal attributes or component props.
id="foo"
// DOM properties are prefixed with `domProps`
domPropsInnerHTML="bar"
// event listeners are prefixed with `on` or `nativeOn`
onClick={this.clickHandler}
nativeOnClick={this.nativeClickHandler}
// other special top-level properties
class={{ foo: true, bar: false }}
style={{ color: 'red', fontSize: '14px' }}
key="key"
ref="ref"
// assign the `ref` is used on elements/components with v-for
refInFor
slot="slot">
</div>
)
}
他事件綁定的方式是用駝峰命名的onClick我現(xiàn)在用的element的版本是1.2.8卓鹿，查看了最新的1.4依舊用的on-click方式Vue jsx 和 React jsx 的一些不同點(diǎn)這篇文章說vue2.1開始支持駝峰的菱魔。
jsx語法的優(yōu)勢(shì)：
- 不用每次都createElement 返回vnode,直接使用正常的HTML嵌套的格式，組件嵌套也是如此吟孙，
import AnchoredHeading from './AnchoredHeading.vue'
new Vue({
el: '#demo',
render (h) {
return (
<AnchoredHeading level={1}>
<span>Hello</span> world!
</AnchoredHeading>
)
}
})
- 事件屬性直接寫在標(biāo)簽上澜倦，不用在配置參數(shù)里配置各個(gè)屬性和事件聚蝶，上面就是直接寫的。
createElement 的屬性和事件配置：
on: {
click: this.clickHandler
},
// 正常的 HTML 特性
attrs: {
id: 'foo'
},
// 組件 props
props: {
myProp: 'bar'
},
element-ui 中哪些使用了jsx語法：
vue : pagination tabs dropdown scrollbar upload
js: col row tooltip
