Vue中jsx不完全应用的示例分析

 
  
{{ injectedProps.user.firstName }}
  Log Full Name
 

 {{ user.firstName }}

// current-user components
{
 data() {
 return {
  user: {
  firstName: 'snow',
  lastName: 'wolf'
  }
 }
 },
 
 computed: {
 slotProps() {
  return {
  user: this.user,
  logFullName: this.logFullName
  }
 }
 },
 
 methods: {
 logFullName() {
  console.log(`${this.firstName} ${this.lastName}`)
 }
 },
 
 render() {
 return (
  

  {this.$scopedSlots.subTitle({
   injectedProps: this.slotProps
  })}
  
 )
 }
}

 (
  

   
injectedProps.user
  Log Full Name
  
 )
 }
}}>

{
 directives：{
 focus: {
  inserted: function(el) {
  el.focus()
  }
 }
 },
 
 render() {
 const directives = [
  { name: 'focus', value: true }
 ]
  
 return (
  

   
  
 )
 }
}

{{ message | capitalize }}

{this.$options.filters('formatDate')('2019-07-01')}

输入值：{ this.title }

注意：如果同时写了class="xx" domPropsClassName="yy"那么后者的优先级较高，和位置无关。所以尽量还是采用class的写法。

有使用过Bootstrap经验的可能会注意到它里面包含了很多ARIA属性，这些属性并不属于DOM，在jsx中可以通过attrsXX或者直接aria-xx的方式来添加:

但是上面的换成domPropsAria-label就没有任何效果。

注意：在jsx中所有DOM属性(Property)语法为domPropsXx, HTML特性(Attribute)语法为attrsXx。更多的时候建议还是少使用，或者说合理使用。

在jsx中还可以使用混用的写法，例如在组件中写了，还可以定义一个属性对象，然后使用{...props}的方式写在一起，这个时候就会出现属性合并的问题，同样的事件多个地方声明事件处理函数，都会触发。

最后需要提及一点的是，在Vue中当给一个组件传了很多props，但是有的并不是组件声明的，也有可能是一些通用的HTML或者DOM属性，但是在最终编译后的HTML中会直接显示这些props，如果不希望这些属性显示在最终的HTML中，可以在组件中设inheritAttrs: false。虽然不显示了，但是我们依然可以通过vm.$attrs获取所有（除class和style)绑定的属性，包括不在props中定义的。

关于事件

前面已经把事件相关的知识点都介绍了，这里主要是提及一下关于jsx事件绑定语法onXx和组件属性（主要是函数prop)以on开头的情况如何处理。

虽然在写组件的时候可以避开命名以on开头，但是在使用第三库的时候，如果遇到了该如何处理呢？比如Element组件Upload很多钩子都是以on开头。 下面提供两种解决办法：

1.使用展开

使用propsXx

推荐使用第二种方式，写起来要简单些。

复杂逻辑条件判断

在模板语法中可以使用v-if、v-else-if和v-else来做条件判断。在jsx中可以通过?:三元运算符(Ternary operator)运算符来做if-else判断：

const Demo = () => isTrue ? 
True!
 : null

然后可以利用&&运算符的特性简写为：

const Demo = () => isTrue && 
True!

对于复杂的条件判断，例如：

const Demo = () => (
 

  {flag && flag2 && !flag3
  ? flag4
   ? 
Blash
  : flag5
   ? 
Meh
  : 
hErp
  : 
Derp
 }
 
)

可以采用两种方式来降低判断识别的复杂度

• 最好的办法：将判断逻辑转移到子组件

• 可选的hacky方法：使用IIFE(立即执行表达式)

• 使用第三方库解决：jsx-control-statements

下面是使用IIFE通过内部使用if-else返回值来优化上述问题：

const Demo = () => (
 

 {
  (() => {
  if (flag && flag2 &&!flag3) {
   if (flag4) {
   return 
Blah
   } else if (flag5) {
   return 
Meh
   } else {
   return 
Herp
   }
  } else {
   return 
Derp
  }
  })()
 }
 
)

还可以使用do表达式，但是需要插件@babel/plugin-proposal-do-expressions的转译来支持，

const Demo = () => (
 

 {
  do {
  if (flag1 && flag2 && !flag3) {
   if (flag4) {
   
Blah
   } else if (flag5) {
   
Meh
   } else {
   
Herp
   }
  } else {
   
Derp
  }
  }
 }
 
)

再就是一种比较简单的可选办法，如下：

const Demo = () => {
 const basicCondition = flag && flag1 && !flag3;
 if (!basicCondition) return 
Derp
 if (flag4) return 
Blah
 if (flag5) return 
Meh
 return 
Herp
}

最后一种使用jsx插件的就不详述和举例了，有兴趣的可以直接查看文档。

组件的传值

在单个jsx文件中可以写很多函数式组件来切分更小的粒度，例如之前的文章Vue后台管理系统开发日常总结__组件PageHeader，组件的形态有两种，一种是普通标题，另一种是带有选项卡的标题，那么在写的时候就可以这样写：

render() {
 // partial html
 const TabHeader = (