Earlier we shared a way to use vUE using the React idea. With many times in the group in order to make the view layer more clear, and some complex logic processing, resulting in the current VUE code JSX code more and more, here is a finishing note

How to use

See this article from Tencent alloyTeam first:

  • Write vUE components in JSX

The babel-plugin-transform-vue-jsx Babel 6 plugin is used to handle JSX compilation.

Of course, it is possible that the authorities also know that JSX has advantages over templates in certain scenarios, so they have a separate repository to enhance the above plug-ins. github.com/vuejs/jsx can be used in the case of Babel 7+

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props <! --.babelrc--> {"presets": ["@vue/babel-preset-jsx"]}Copy the code

You can now use v-Model for two-way binding in JSX! Of course this is just grammar candy. You can also implement V-for using Babel.

For some simple cases we can just use JSX instead of Template without any problems, but as we drill down, we’ll look at some react specific modes such as render props in vue. It is time to compare and understand the attribute differences of vUE instances. (Render props = slotProps. Default)

  • Cn.vuejs.org/v2/guide/re…
  • www.yuque.com/zeka/vue/vu…

Integration issues with component libraries

For ANTD-vue, the API implementation is basically the same as the React version, so the call method is basically the same as the react version document.

import {Input} form 'ant-design-vue'
<Input value={xx} onChange={(e)=>{}}>

//----

const HelloWorld = ({ props }) => <p>hello {props.message}</p>
Copy the code

However, there are some less friendly component libraries such as iView. Since most of the internal APIS use the form this.$emit(‘ on-xxevent ‘), @on-xxEvent=”xx” is fine with the template syntax. But it’s weird in JSX syntax. As follows:

<Input value={xx} on-on-Change={(e)=>{}}>
Copy the code

Above we dealt with the problem of using JSX directly. So can we be more like react?

Single file component

A vue single-file component we might write at this point would look like this:

VueForm.vue

<script>
export default {
  name: 'VueForm',
  props: {},
  data() {
    return {}
  },
  render(){
    return (
        <div>
            <input />
        </div>
    )
  }
}
</script>
<style ></style>
Copy the code

How to use.js or JSX files directly?

VueForm.jsx

const VueForm = {
  name: 'VueForm'.props: {},
  data() {
    return{}},methods:{
  
  },
  render(){
    return (
        <div>
            <input />
        </div>
    )
  }
}
VueForm.install = function(Vue) {
  Vue.component(VueForm.name, VueForm);
};

export default VueForm;
Copy the code

Each component has to define the install method and also have to write methods. Or even simpler?

class component

Vue provides the vue-class-Component module, so we can write code like this.

import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  props: {
    propMessage: String}})export default class App extends Vue {
  // initial data
  msg = 123
  // use prop values for initial data
  helloMsg = 'Hello, ' + this.propMessage
  // lifecycle hook
  mounted () {
    this.greet()
  }
  // computed
  get computedMsg () {
    return 'computed ' + this.msg
  }
  // method
  greet () {
    alert('greeting: ' + this.msg)
  }
  render(){
    return (
        <input vModel={this.msg}>
        <p>prop: {this.propMessage}</p>
        <p>msg: {this.msg}</p>
        <p>helloMsg: {this.helloMsg}</p>
        <p>computed msg: {this.computedMsg}</p>
        <button onClick={this.greet}>Greet</button>)}}Copy the code

Of course, that alone may not be enough. You need another module vue-property-decorator or even a vuex-class

Huh? Isn’t React + Mobx?

We can see that vue is very scalable. Congratulations on your entry into a cult. 23333