Vue中JSX的基本用法及高级部分

一、Vue中JSX的基本用法

1. 安装依赖

首先需要在项目中安装vue-template-compiler依赖：

npm install vue-template-compiler --save-dev

1. JS文件中使用JSX

在Vue的实例中引入vue-template-compiler并将template编译为render函数，然后将这个render函数渲染到页面上。

<template>
  <div id="app"></div>
</template>

<script>
import { compileToFunctions } from 'vue-template-compiler'

export default {
  name: 'App',
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  render() {
    return compileToFunctions(`
      <div>
        <h1>{this.message}</h1>
      </div>
    `)()
  }
}
</script>

1. 在Vue组件中使用JSX

直接在Vue组件中写JSX即可：

import Vue from 'vue'

export default {
  name: 'App',
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  render(h) {
    return (
      <div>
        <h1>{this.message}</h1>
      </div>
    )
  }
}

二、Vue中JSX的高级用法

1. 使用slot

JSX中使用<slot>标签可以让父组件向子组件传递内容：

import Vue from 'vue'

const Child = {
  render() {
    return (
      <div>
        <slot name="header" />
        <p>Child</p>
        <slot name="footer" />
      </div>
    )
  }
}

export default {
  name: 'App',
  components: { Child },
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  render(h) {
    return (
      <div>
        <Child>
          <template slot="header">
            <h1>{this.message}</h1>
          </template>
          <template slot="footer">
            <footer>Footer</footer>
          </template>
        </Child>
      </div>
    )
  }
}

1. 使用mixin

Vue中的mixin是一种在多个组件之间共享逻辑的方式，可以在JSX中使用。

import Vue from 'vue'

const mixin = {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    showMessage() {
      alert(this.message)
    }
  }
}

const Child = {
  mixins: [mixin],
  render(h) {
    return (
      <div>
        <button onClick={this.showMessage}>{this.message}</button>
      </div>
    )
  }
}

export default {
  name: 'App',
  components: { Child },
  render(h) {
    return (
      <div>
        <Child />
      </div>
    )
  }
}

以上是JSX在Vue中的基本和高级用法。