最后需要提及一点的是，在Vue中当给一个组件传了很多props，但是有的并不是组件声明的，也有可能是一些通用的HTML或者DOM属性，但是在最终编译后的HTML中会直接显示这些props，如果不希望这些属性显示在最终的HTML中，可以在组件中设inheritAttrs: false。虽然不显示了，但是我们依然可以通过vm.$attrs获取所有（除class和style)绑定的属性，包括不在props中定义的。
关于事件
前面已经把事件相关的知识点都介绍了，这里主要是提及一下关于jsx事件绑定语法onXx和组件属性（主要是函数prop)以on开头的情况如何处理。
虽然在写组件的时候可以避开命名以on开头，但是在使用第三库的时候，如果遇到了该如何处理呢？比如Element组件Upload很多钩子都是以on开头。 下面提供两种解决办法：
1.使用展开
<el-upload {...{
props: {
onPreview: this.handlePreview
}
}} />
使用propsXx
<el-upload propsOnPreview={this.handlePreview} />推荐使用第二种方式，写起来要简单些。
复杂逻辑条件判断
在模板语法中可以使用v-if、v-else-if和v-else来做条件判断。在jsx中可以通过?:三元运算符(Ternary operator)运算符来做if-else判断：
const Demo = () => isTrue ? <p>True!</p> : null然后可以利用&&运算符的特性简写为：
const Demo = () => isTrue && <p>True!</p>
对于复杂的条件判断，例如：
const Demo = () => (
<div>
{flag && flag2 && !flag3
? flag4
? <p>Blash</p>
: flag5
? <p>Meh</p>
: <p>hErp</p>
: <p>Derp</p>
}
</div>
)
可以采用两种方式来降低判断识别的复杂度
最好的办法：将判断逻辑转移到子组件
可选的hacky方法：使用IIFE(立即执行表达式)
使用第三方库解决：jsx-control-statements
下面是使用IIFE通过内部使用if-else返回值来优化上述问题：
const Demo = () => (
<div>
{
(() => {
if (flag && flag2 &&!flag3) {
if (flag4) {
return <p>Blah</p>
} else if (flag5) {
return <p>Meh</p>
} else {
return <p>Herp</p>
}
} else {
return <p>Derp</p>
}
})()
}
</div>
