Vue 组件的全局注册与组件的jsx实现方法

大部分情况下我们都会使用template来创建html，开发体验会更好，但并不是每个时候使用它来创建 html 都是最佳的，所以官方提供了接近原生构建html的render()函数，让开发者能够依据自己的情况选择更好的构建方式。

有些同学会问，到底何时选择template或者render()，我的回答是，你应该两者都得掌握，template 有它的局限性，render()函数可以是对它的补充，各有优缺点，你把他们使用在正确的地方，就能更优雅、简便的解决你的问题。每一个解决方案都不可能解决所有问题，你应该去掌握尽可能多的不同解决方案。

Vue使用render函数（以js文件的形式生成组件）

loading.js

export default {
  //组件名
  name: "strReverse",
  //属性
  props: {
    msg: {
      type: String,
      default: "",
    },
  },
  data:()=>{
    return {
      message:1
    }
  },
  //方法
  methods: {
    reversedMessage() {
      return this.msg.split("").reverse().join("");
    },
    add(){
      this.message++
    }
  },
  //生成html
  render(h) {
    return (<div>
      {this.message}
      <button  onClick={() => this.add(this)}>message++</button>
      </div>)
  },
};


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

Vue模版实例作为组件注册使用

loading.vue

<template>
  <div class="contain">
    <h1>Load....h1>
    <button @click="count++">{{count}}++button>
  div>
template>

<script>
export default {
    data(){
      return {
        count:1
      }
    }
}
script>

<styl lang='less' scoped>
  .contain{
    border: 1px solid rebeccapurple;
    width: 200px;
    margin: 0 auto;
  }
styl>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在main.js注册

import Loading  from '@/components/global/Loading.js'
import Load from '@/components/global/Load.vue'

Vue.component('Loading',Loading);
Vue.component('Load',Load);
1
2
3
4
5