vue中書寫JSX一些坑-特殊屬性名

舉例說明, T1和T2引用Sub時, key2會出如今props以及data.attrs中, 而key則在data中

const Sub = ({data, props}) => {
  console.log(data,  props)
  return <h1>hello</h1>
}
const T1 = () => {
  return <Sub key="foo"/>
}
const T2 = () => {
  return <Sub key2="foo"/>
}
const T3 = () => {
  return <Sub propsKey2="foo"/>
}

由於key是特殊屬性, 那麼哪些屬性名是特殊的呢? 直接看源碼

const rootAttributes = ['staticClass', 'class', 'style', 'key', 'ref', 'refInFor', 'slot', 'scopedSlots', 'model']
const prefixes = ['props', 'domProps', 'on', 'nativeOn', 'hook', 'attrs']

那麼若是我硬是想把rootAttributes裏面的變量名用於props, 該怎麼辦呢? 經測試:

<Sub props={{key: "foo"}}/>

參考:
https://github.com/vuejs/jsx/blob/master/packages/babel-plugin-transform-vue-jsx/src/index.js