Vue JSX、自定义 v-model

最初用到 JSX，就是做这个博客的时候。iview 表格组件，不支持像 element 那样直接写 html 代码渲染，只能通过 render 函数渲染，也就是 JSX 语法

这个说起来不陌生，JSX 是 react 框架的老本行了，玩 react 的同学肯定对这个也玩的很溜（最近在公司做的某些项目也是 react）

那我还是记录一下在 Vue JSX 的使用吧

JSX 定义

JSX 是一种 JavaScript 的语法扩展，多运用于 React 架构中。JSX = Javascript + XML，即在 Javascript 里面写 XML，即具备 Javascript 的灵活性，又有 html 的语义化和直观性

应用场景

有人说，Vue 的模板语法简单易上手，实现的功能也几乎足够。JSX 不好上手，写起来代码量也多，用来干啥呢

那你就忽略了 JavaScript 的灵活性了

一些复杂表单的实现

在这插播一个使用 vue 模板语法实现复杂表单的传送门：Element 动态渲染、移除表单并添加验证 & 动态添加、移除验证
函数式组件

函数式组件

简单说一下函数式组件

函数式组件就是函数是组件。使用过 React 的同学，应该不会对函数式组件感到陌生

函数式组件，我们可以理解为没有内部状态，没有生命周期钩子函数，没有 this(不需要实例化的组件)

在日常开发中，经常会开发一些纯展示性的业务组件，比如一些详情页面，列表界面等，它们有一个共同的特点是只需要将外部传入的数据进行展现，不需要有内部状态，不需要在生命周期钩子函数里面做处理，这时候你就可以考虑使用函数式组件

export default {

  // 通过配置 functional 属性指定组件为函数式组件

  functional: true,

  // 组件接收的外部属性

  props: {

    avatar: {

      type: String

    }

  },

  /**

   * 渲染函数

   * @param {*} h

   * @param {*} context 函数式组件没有 this, props, slots 等，都在 context 上面挂着

   */

  render(h, context) {

    const { props } = context

    if (props.avatar) {

      return <img src={props.avatar}></img>

    }

    return <img src="default-avatar.png"></img>

  }

}

使用函数式组件的原因：

最主要最关键的原因是函数式组件不需要实例化，无状态，没有生命周期，所以渲染性能要好于普通组件
函数式组件结构比较简单，代码结构更清晰

函数式组件与普通组件的区别

函数式组件需要在组件上声明functional
函数式组件不需要实例化，所以没有 this，this通过render函数的第二个参数来代替
函数式组件没有生命周期钩子函数，不能使用计算属性、watch 等等
函数式组件不能通过 $emit 对外暴露事件，调用事件只能通过context.listeners.click的方式调用外部传入的事件
因为函数式组件是没有实例化的，所以在外部通过ref去引用组件时，实际引用的是 HTMLElement
函数式组件的props可以不用显示声明，所以没有在props里面声明的属性都会被自动隐式解析为 prop，而普通组件所有未声明的属性都被解析到 $attrs 里面，并自动挂载到组件根元素上面(可以通过 inheritAttrs 属性禁止)

模板语法声明函数式组件

在 Vue2.5 之前，使用函数式组件只能通过 JSX 的方式，在之后可以通过模板语法来声明函数式组件

<!-- 在template 上面添加 functional属性 -->

<template functional>

  <img :src="props.avatar ? props.avatar : 'default-avatar.png'" />

</template>

<!-- 上面第 6 条，可以省略声明 props -->

了解 createElement

学习 JSX 之前，先了解 createElement

字面意思，创建元素大名鼎鼎的虚拟DOM应该都知道吧，就是它的返回值 => 插播一个以前写过的VNode传送门：virtual DOM

关于 createElement 方法，有三个参数:

第一个参数主要用于提供 dom 的 html 内容，类型可以是字符串、对象或函数。比如 “div” 就是创建一个 div 标签
第二个参数（类型是对象）主要用于设置这个 dom 的一些样式、属性、传的组件的参数、绑定事件之类，具体可以参考官方文档里这一小节的说明
第三个参数（类型是数组，数组元素类型是 VNode）主要用于说是该节点下有其他结点的话，就放在这里

使用例子：

export default {

 methods: {

    $_handleChangeUser(value) {

      this.formInline.user = value

    }

  },

  render(h) {

    return h(

      'ElForm',

      {

        props: {

          inline: true,

          model: this.formInline

        },

        staticClass: 'demo-form-inline'

      },

      [

        h(

          'ElFormItem',

          {

            props: {

              label: '用户名'

            }

          },

          [

            h('ElInput', {

              props: {

                value: this.formInline.user

              },

              attrs: {

                placeholder: '请输入用户名'

              },

              on: {

                input: this.$_handleChangeUser

              }

            })

          ]

        )

      ]

    )

  }

}

看起来写法十分复杂，若页面上这么多元素，频繁使用 createElement 方法难免代码臃肿，这时就应该使用 JSX 代替 createElement 了

JSX

我们再来用 JSX 语法重新实现上面的代码

methods: {

  $_handleInputUser(value) {

    this.formInline.user = value

  }

},

render(h) {

  return (

    <el-form inline model={this.formInline} class="demo-form-inline">

      <el-form-item label="用户名">

        <el-input

          value={this.formInline.user}

          onInput={this.$_handleInputUser}

          placeholder="请输入用户名"

        ></el-input>

      </el-form-item>

    </el-form>

  )

}

跟 react 一模一样了

将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的

从 Vue 的 Babel 插件的 3.4.0 版本开始，我们会在以 ES2015 语法声明的含有 JSX 的任何方法和 getter 中 (不是函数或箭头函数中) 自动注入const h = this.$createElement，这样就可以去掉 (h) 参数了。对于更早版本的插件，如果 h 在当前作用域中不可用，应用会报错

Vue JSX 中指令的使用

我们使用 Vue 模板语法，指令用的爽歪歪，像 v-model, v-if, v-for, @, 插槽等等

但是，这些都在 JSX 中无法使用。那么如何实现相同的功能呢

注意：新版 vue-cli4 中，已经默认集成了 JSX 语法对 v-model 的支持，可以直接使用 <input v-model={this.value}>

如果你的项目比较老，也可以安装插件 babel-plugin-jsx-v-model 来进行支持

自定义 v-model

v-model 是 Vue 提供的一个语法糖，它本质上是由 value 属性 + input 事件组成的（都是原生的默认属性）

所以在 JSX 中，我们可以通过传递 value 属性并监听 input 事件来实现数据的双向绑定

export default {

  data() {

    return {

      name: ''

    }

  },

  methods: {

    // 监听 onInput 事件进行赋值操作

    $_handleInput(e) {

      this.name = e.target.value

    }

  },

  render() {

    // 传递 value 属性 并监听 onInput事件

    return <input value={this.name} onInput={this.$_handleInput}></input>

  }

}

封装组件如下：

子组件

<template>

  <div>

    <input :value="value" @change="$_handleChange" />

  </div>

</template>

<script>

export default {

  props: {

    value: {

      type: String,

      default: ''

    }

  },

  data() {

    return {}

  },

  methods: {

    $_handleChange(e) {

      this.$emit('input', e.target.value)

    }

  }

}

</script>

父组件

<template>

  <div class="home">

    <krry-input v-model="say"></krry-input>

  </div>

</template>

<script>

export default {

  name: 'Home',

  components: {

    KrryInput: () => import('@/components/KrryInput')

  },

  data() {

    return {

      say: 'haha'

    }

  }

}

</script>

再次重申：新版 vue-cli4 中，已经默认集成了 JSX 语法对 v-model 的支持，可以直接使用 <input v-model={this.value}>

el-form 的 :model 属性

注意 el-form 的 :model 属性，在 JSX 中是这样写的 props={{ model: this.data }}，比较特别

<el-form

  ref="form"

  labelWidth="140px"

  rules={this.rules}

  props={{ model: this.data }}>

  <el-form-item label="券码编号: ">

    <el-input v-model={this.data.voucherCode}></el-input>

  </el-form-item>

<el-form>

v-if | v-for

这两个就比较常见，搞 react 都知道，v-if 可以使用三元表达式，true or false 来渲染组件；v-for 就使用 map 方法来实现

const list = ['宫', '商', '角', '徵', '羽']

return (

  <ul>

    { list.map(ele => <li>{ele}</li>) }

  </ul>

)

v-html | v-text

在 JSX 里面，如果要设置 dom 元素的 innerHTML，就用到 domProps

export default {

  data() {

    return {

      content: '<div>这是我的自定义的 html 元素</div>'

    }

  },

  render() {

    // v-html 指令在 JSX 的写法是 domPropsInnerHTML

    return <div domPropsInnerHTML={this.content}></div>

  }

}

v-text 就没啥好说的了，<div domPropsInnerText={this.content}></div>

还不如直接使用 <div>{this.content}</div>

监听事件

监听事件想到用 onChange, onClick

需要注意的是，传参数不能使用 onClick={this.removePhone(params)}，这样子会每次 render 的时候都会自动执行一次方法

应该使用 bind，或者箭头函数来传参

<button type="button" onClick={this.handleClick.bind(this, 11)}></button>

<button type="button" onClick={() => this.handleClick(11)}></button>

除此之外，还可以使用对象的方式去监听事件

render() {

  return (

    <el-input

      value={this.content}

      on={{

        focus: this.$_handleFocus,

        input: this.$_handleInput

      }}

      nativeOn={{

        click: this.$_handleClick

      }}

    ></el-input>

  )

}

使用范围

不仅仅在 render 函数里面使用 JSX，而且还可以在 methods 里面返回 JSX，然后在 render 函数里面调用这个方法

JSX 还可以直接赋值给变量

methods: {

  $_renderFooter() {

    return (

      <div>

        <el-button>确定</el-button>

        <el-button>取消</el-button>

      </div>

    )

  }

},

render() {

  const buttons = this.$_renderFooter()

  return (

    <el-dialog visible={this.visible}>

      <div>弹窗内容</div>

      <template slot="footer">{buttons}</template>

    </el-dialog>

  )

}

博客地址：https://ainyi.com/92