举例说明, 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