Vue中如何正确的使用jsx语法书写代码_@vue/babel-preset-jsx

一、首要了解vue的render函数？

我们得知道有些特定的场景下 我们是需要去用到render函数去渲染vue模板的，那么何种场景呢？
在这里我可以找两个例子

当然我们也可一看一下element的源码 package.json中是否存在这两个依赖

以下是官网采用的两个依赖（其实两者是一样的 只不过由于版本问题）

当然这两个依赖也同样是我们在vue中书写jsx必不可少的两个依赖

回到render函数上面来，首先我们要了解的是什么是render函数，那么我们必须要知道的是什么？什么是虚拟dom，那么什么是虚拟dom呢？

1、什么是虚拟dom？

其实这是一个屡见不鲜的面试题，用一句话来概括，用javascript的方式书写出来的dom节点就是虚拟dom，在vue中虚拟dom也就是我们所说的vnode等同于虚拟dom。

官网给出的我们使用render书写渲染函数，其实我们要理解的是什么？

因为vue是虚拟dom，所以在拿到template模板时也要转译成vnode的函数，而用render函数构建dom，vue就免去了转译的过程，我们在一些特定场景下去使用render书写起来性能方面能得到更进一步的提升。

看一下官网使用render函数书写虚拟dom

// template 模板写法
<script type="text/x-template" id="anchored-heading-template">
  <h1 v-if="level === 1">
    <slot></slot>
  </h1>
  <h2 v-else-if="level === 2">
    <slot></slot>
  </h2>
  <h3 v-else-if="level === 3">
    <slot></slot>
  </h3>
  <h4 v-else-if="level === 4">
    <slot></slot>
  </h4>
  <h5 v-else-if="level === 5">
    <slot></slot>
  </h5>
  <h6 v-else-if="level === 6">
    <slot></slot>
  </h6>
</script>
<script>
Vue.component('anchored-heading', {
  template: '#anchored-heading-template',
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})
</script>



// createElement 虚拟dom写法
<script>
Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // 标签名称
      this.$slots.default // 子节点数组
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})
</script>
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

这样看起来的话好像反而要比template模板写法来的更简洁些，但是如果数据量一旦多起来呢？我们不免要考虑的一个问题就是不如标签写法来的直观。

当然有了解react的同学就会说了 那react也同样是render函数进行渲染 而且里面写的是jsx模板标签，那么我们可不可以在vue的render里面书写jsx模板标签呢？

此时其实也就引出了我们今天的主题，如何在vue的render中去书写jsx标签。

2、如何在render中使用jsx语法进行书写？

我们来到 git地址

同样官网会给出我们解答

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
1

babel.config.js

module.exports = {
  presets: ['@vue/babel-preset-jsx'],
}
1
2
3

其实就是像这样（因为我这边使用的是vueCli已经携带了babel所以已经有了这个文件）

那么其实这个时候，我们的jsx就已经安装好了，此时我们就可以愉快的在render中书写jsx来进行编码了。

这个时候我们也同样将git上面的几个案例搬运过来

3、写法示例

// 书写jsx模板（外层单个标签 不要retrun两个标签）
render() {
  return <p>hello</p>
}

// 具有动态属性
render() {
  return <p>hello { this.message }</p>
}

// 单闭合标签
render() {
  return <input />
}

// 引入组件
import MyComponent from './my-component'
export default {
  render() {
    return <MyComponent>hello</MyComponent>
  },
}

// 带有属性
render() {
  return <input type="email" />
}

// 带有动态属性（这里面的this指向的便是当前的vue实例）
render() {
  return <input
    type="email"
    placeholder={this.placeholderText}
  />
}

// 带有多个动态属性  object解构式写法
render() {
  const inputAttrs = {
    type: 'email',
    placeholder: 'Enter your email'
  }
  return <input {...{ attrs: inputAttrs }} />
}

// 指令v-model
render() {
  return <input vModel={this.newTodoText} />
}

// 指令v-model 修饰符trim 去空格
render() {
  return <input vModel_trim={this.newTodoText} />
}

// 事件@click 
render() {
  return <input vOn:click={this.newTodoText} />
}

// 事件@click 移除冒泡以及默认行为
render() {
  return <input vOn:click_stop_prevent={this.newTodoText} />
}

// 指令v-html
render() {
  return <p domPropsInnerHTML={html} />
}

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

当然我们同样是可以使用想onClick = {this.xxx}这种方式去进行书写的。

二、案例编写

<!--
 * @Author: your name
 * @Date: 2021-04-29 11:29:18
 * @LastEditTime: 2021-04-29 15:23:33
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /hx/packages/tbTag/main.vue
-->
<script>
export default {
  name: "tbTag",

  render(h) {
    const data = {
      props: {
        ...this.$attrs,
      },
      on: {
        ...this.$listeners,
      },
    };

    // 使用jsx 模板插槽的话  用default[0]即可
    return (
      <div {...data} style={this.color ? `background-color:${this.color}` : ""} class={`tb-tag tag  ${this.tbType} ${this.tbSize} ${this.tbEffect}`}>
        {this.$slots.default[0]}{" "}
        <i
          vOn:click_stop={() => {
            this.$emit("close");
          }}
          class="iconfont icon-close-bold bold"
          style="margin-left:2px;"
        ></i>
      </div>
    );
  },
  data() {
    return {
      tbSize: "tag_small",
      tbType: "",
      tbEffect: "",
      isCloseble: "",
    };
  },
  props: {
    // 颜色
    type: {
      type: String,
      default: "primary",
    },
    // 大小
    size: {
      type: String,
      default: "small",
    },
    // 三种样式一种是  light也就是默认  发浅色  dark:实心   plain:镂空
    effect: {
      type: String,
      default: "light",
    },
    // 自定义背景颜色
    color: {
      type: String,
      default: "",
    },
    // 关闭标签
    closable: {
      type: Boolean,
      default: false,
    },
  },
  created() {
    this.Ptype();
    this.Psize();
    this.Peffect();
    this.Pclosable();
  },
  methods: {
    // 页面加载判断当前标签是否存在关闭小图标
    Pclosable() {
      const vm = this;
      if (vm.closable) {
        vm.isCloseble = true;
      } else {
        vm.isCloseble = false;
      }
    },
    // 页面加载判断当前是何种样式
    Peffect() {
      const vm = this;
      if (vm.effect == "light") {
        vm.tbEffect = "tag_effect_light";
      } else if (vm.effect == "dark") {
        vm.tbEffect = "tag_effect_dark";
      } else if (vm.effect == "plain") {
        vm.tbEffect = "tag_effect_plain";
      }
    },
    // 页面加载判断当前按钮大小
    Psize() {
      const vm = this;
      if (vm.size == "mini") {
        vm.tbSize = "tag_mini";
      } else if (vm.size == "small") {
        vm.tbSize = "tag_small";
      } else if (vm.size == "medium") {
        vm.tbSize = "tag_medium";
      }
    },
    // 页面加载判断当前按钮类型
    Ptype() {
      const vm = this;
      if (vm.type == "primary") {
        vm.tbType = "tag_primary";
      } else if (vm.type == "success") {
        vm.tbType = "tag_success";
      } else if (vm.type == "info") {
        vm.tbType = "tag_info";
      } else if (vm.type == "warning") {
        vm.tbType = "tag_warning";
      } else if (vm.type == "danger") {
        vm.tbType = "tag_danger";
      }
    },
  },
};
</script>
<style scoped>
.bold {
  cursor: pointer;
}
.tag {
  margin: 0 2px;
  border-radius: 4px;
  background: #ffffff;
}
/* .tag:focus,
.tag:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
} */

/* size 样式 */
.tag_mini {
  height: 30px;
  font-size: 12px;
  display: inline-block;
  border: 1px solid #eeeeee;
  line-height: 30px;
  text-align: center;
  padding: 0 16px;
  /* cursor: pointer; */
}
.tag_small {
  height: 35px;
  font-size: 14px;
  display: inline-block;
  border: 1px solid #eeeeee;
  line-height: 35px;
  text-align: center;
  padding: 0 20px;
  /* cursor: pointer; */
}
.tag_medium {
  height: 40px;
  font-size: 16px;
  display: inline-block;
  border: 1px solid #eeeeee;
  line-height: 40px;
  text-align: center;
  padding: 0 24px;
  /* cursor: pointer; */
}
/* effect 按钮样式 */
.tag_primary {
  color: #409eff;
  background-color: #ecf5ff;
  border-color: #d9ecff;
}
.tag_success {
  color: #67c23a;
  background-color: #f0f9eb;
  border-color: #e1f3d8;
}
.tag_info {
  color: #909399;
  background-color: #f4f4f5;
  border-color: #e9e9eb;
}
.tag_warning {
  color: #e6a23c;
  background-color: #fdf6ec;
  border-color: #faecd8;
}
.tag_danger {
  color: #f56c6c;
  background-color: #fef0f0;
  border-color: #fde2e2;
}

/* .tag_primary:focus,
.tag_primary:hover {
  color: #409eff;
  background-color: #ecf5ff;
  border-color: #d9ecff;
}

.tag_success:focus,
.tag_success:hover {
  color: #67c23a;
  background-color: #f0f9eb;
  border-color: #e1f3d8;
}

.tag_info:focus,
.tag_info:hover {
  color: #909399;
  background-color: #f4f4f5;
  border-color: #e9e9eb;
}

.tag_warning:focus,
.tag_warning:hover {
  color: #e6a23c;
  background-color: #fdf6ec;
  border-color: #faecd8;
}

.tag_danger:focus,
.tag_danger:hover {
  color: #f56c6c;
  background-color: #fef0f0;
  border-color: #fde2e2;
} */

.tag_primary.tag_effect_dark {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
}
/* .tag_primary.tag_effect_dark:focus,
.tag_primary.tag_effect_dark:hover {
  background: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
} */
.tag_success.tag_effect_dark {
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
}
/* .tag_success.tag_effect_dark:focus,
.tag_success.tag_effect_dark:hover {
  background: #85ce61;
  border-color: #85ce61;
  color: #fff;
} */

.tag_info.tag_effect_dark {
  color: #fff;
  background-color: #909399;
  border-color: #909399;
}
/* .tag_info.tag_effect_dark:focus,
.tag_info.tag_effect_dark:hover {
  background: #a6a9ad;
  border-color: #a6a9ad;
  color: #fff;
} */
.tag_warning.tag_effect_dark {
  color: #fff;
  background-color: #e6a23c;
  border-color: #e6a23c;
}
/* .tag_warning.tag_effect_dark:focus,
.tag_warning.tag_effect_dark:hover {
  background: #ebb563;
  border-color: #ebb563;
  color: #fff;
} */
.tag_danger.tag_effect_dark {
  color: #fff;
  background-color: #f56c6c;
  border-color: #f56c6c;
}
/* .tag_danger.tag_effect_dark:focus,
.tag_danger.tag_effect_dark:hover {
  background: #f78989;
  border-color: #f78989;
  color: #fff;
} */
.tag_primary.tag_effect_plain {
  color: #409eff;
  background: #ffffff;
  border-color: #b3d8ff;
}
/* .tag_primary.tag_effect_plain:focus,
.tag_primary.tag_effect_plain:hover {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
} */
.tag_success.tag_effect_plain {
  color: #67c23a;
  background: #ffffff;
  border-color: #c2e7b0;
}
/* .tag_success.tag_effect_plain:focus,
.tag_success.tag_effect_plain:hover {
  background: #67c23a;
  border-color: #67c23a;
  color: #fff;
} */
.tag_info.tag_effect_plain {
  color: #909399;
  background: #ffffff;
  border-color: #d3d4d6;
}
/* .tag_info.tag_effect_plain:focus,
.tag_info.tag_effect_plain:hover {
  background: #909399;
  border-color: #909399;
  color: #fff;
} */
.tag_warning.tag_effect_plain {
  color: #e6a23c;
  background: #ffffff;
  border-color: #f5dab1;
}
/* .tag_warning.tag_effect_plain:focus,
.tag_warning.tag_effect_plain:hover {
  background: #e6a23c;
  border-color: #e6a23c;
  color: #fff;
} */
.tag_danger.tag_effect_plain {
  color: #f56c6c;
  background: #ffffff;
  border-color: #fbc4c4;
}
/* .tag_danger.tag_effect_plain:focus,
.tag_danger.tag_effect_plain:hover {
  background: #f56c6c;
  border-color: #f56c6c;
  color: #fff;
} */
</style>

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349

引入调用即可。