学Vue，就要学会vue JSX（大结局）

只能在render函数里面使用JSX吗

当然不是，你可以定义method，然后在method里面返回JSX,然后在render函数里面调用这个方法，不仅如此，JSX还可以直接赋值给变量，比如下面这段代码

 methods: {
    $_renderFooter() {
      return (
        <div>
          <ElButton>确定</ElButton>
          <ElButton>取消</ElButton>
        </div>
      )
    }
  },
  render() {
    const buttons = this.$_renderFooter()
    return (
      <ElDialog visible={this.visible}>
        <div>这里是一大坨内容</div>
        <template slot="footer">{buttons}</template>
      </ElDialog>
    )
  }

就算我今天不吃晚饭，也要把指令给大家讲讲

基础用法

虽然大部分内置的指令无法直接在JSX里面使用，但是自定义的指令可以在JSX里面使用，就拿element-ui的v-loading指令来说，可以这样用

  render() {
    /**
     * 一个组件上面可以使用多个指令，所以是一个数组
     * name 对应指令的名称， 需要去掉 v- 前缀
     * value 对应 `v-loading="value"`中的value
     */
    const directives = [{ name: 'loading', value: this.loading }]
    return (
      <div
        {...{
          directives
        }}
      ></div>
    )
  }

修饰符

有些指令还可以使用修饰符,比如上例中的v-loading,你可以通过修饰符指定是否全屏遮罩，是否锁定屏幕的滚动，这时候就需要这样写 v-loading.fullscreen.lock = "loading"

  render() {
    /**
     * modifiers指定修饰符，如果使用某一个修饰符，则指定这个修饰符的值为 true
     * 不使用可以设置为false或者直接删掉
     */
    const directives = [
      {
        name: 'loading',
        value: this.loading,
        modifiers: { fullscreen: true, lock: false }
      }
    ]
    return (
      <div
        {...{
          directives
        }}
      ></div>
    )
  }

总结

好了，今天讲到这里已经把vue JSX讲完了。这一内容基本上讲的差不多了。觉得对您有帮助的可以帮忙点个赞。在这里谢谢大家了。我会不断出新的优质的文章给大家分享，一起学习进步。