举例说明, T1和T2引用Sub时, key2会出现在props以及data.attrs中, 而key则在data中
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13const 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
是特殊属性, 那么哪些属性名是特殊的呢? 直接看源码
复制代码
1
2const rootAttributes = ['staticClass', 'class', 'style', 'key', 'ref', 'refInFor', 'slot', 'scopedSlots', 'model'] const prefixes = ['props', 'domProps', 'on', 'nativeOn', 'hook', 'attrs']
那么如果我硬是想把rootAttributes
里面的变量名用于props
, 该怎么办呢? 经测试:
复制代码
1<Sub props={{key: "foo"}}/>
参考:
https://github.com/vuejs/jsx/blob/master/packages/babel-plugin-transform-vue-jsx/src/index.js
转载于:https://www.cnblogs.com/xiangnan/p/10925091.html
最后
以上就是鲜艳吐司最近收集整理的关于vue中书写JSX一些坑-特殊属性名的全部内容,更多相关vue中书写JSX一些坑-特殊属性名内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复