Vue中Jsx的使用
什么是JSX?
JSX就是Javascript和XML结合的一种格式。React发明了JSX,利用HTML语法来创建虚拟DOM。当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析。
应用场景是什么?
当需要用render函数写一个复杂的组件时,可以考虑使用jsx的方式。让代码结构简单,降低开发难度,提升易读性。
举个栗子
vue.js官网demo:https://cn.vuejs.org/v2/guide/render-function.html#JSX
import AnchoredHeading from './AnchoredHeading.vue' new Vue({ el: '#demo', render: function (h) { return ( <AnchoredHeading level={1}> <span>Hello</span> world! </AnchoredHeading> ) } })
我开发过程中的栗子:
1.调用
{ title: "组织机构", resizable: true, minWidth: 200, align: "left", key: "organizeName", render: (h, params) => { return ( <TemplateMainOrgs {...{ props: { organizeName: params.row.organizeName } }} ></TemplateMainOrgs> ) } },
2.定义
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <Tooltip placement="top" :class="{detailClassFix:isDetailPage}"> <div class="ellipsis-2line" style="-webkit-box-orient: vertical;" v-if="orgs.length>0"> <div v-for="(org,index) in orgs" :key="index"> <p>{{org}}</p> </div> </div> <div class v-else>--</div> <div slot="content"> <div class v-if="orgs.length>0"> <div v-for="(org,index) in orgs" :key="index"> <p>{{org}}</p> </div> </div> <div class v-else>--</div> </div> </Tooltip> </template> <script> export default { props: { organizeName: { type: String, required: true, default: '', }, parentName: { type: String, required: false, }, }, data () { return { } }, computed: { isDetailPage: function () { return this.parentName == 'detail' }, orgs: function () { return this.handleName() || [] }, }, created () { }, methods: { handleName () { if (this.organizeName) { let arr = this.organizeName.split(',') return arr.map(item => { return item.replaceAll('*', ' > ') }) } } }, } </script> <style lang="less" scoped> .detailClassFix { vertical-align: top; .ellipsis-2line { -webkit-line-clamp: 8; } } </style>
可以看出,由于需要渲染的内容及其复杂,不易于使用render函数直接书写,因此将内容单独为一个组件,在此引入。而且抽取出来的组件也可以用在其他地方。
如何给jsx组件传值
--------学习 交流 提升-----------