vue 使用jsx需要注意的问题

vue 使用jsx官网提供了一些方式，为什么用jsx，因为jsx足够灵活，模板引擎虽然比较简单，但复杂dom结构仍然生成不了，我近期做了一个递归生成dom结构的DEMO，因为递归的原因，普通的模板引擎实现不了这种，所以我用了jsx。

引入JSX比较简单，用https://github.com/vuejs/babel-plugin-transform-vue-jsx这个网站里面提供的，增加这些依赖就可以了。

其实用JSX生成的组件和用正常模板引擎生成的组件可以一样，就是把template删了，然后再export default里面加个render，render里面完全用jsx的语法，其他的正常些就行了

其中如果给事件传值的话需要这么写，this.clickHandler.bind(this,data)，JS操作的部分要用{}，DOM结构用()

demo 如下,可以看下，其中slot还没找到引入的方式，如果有知道的大神，望留言指导一下，

<script>
  import $ from 'jquery'
  export default {
    data(){
      return {
        nameList:[
          {
            'name':'借金业务1',
            'router':'/name/name1/name',
            'pai':'60',
            'show':true,
            'layer':0,
            'group':'1',
            'permissions':'name:name1:name',
            children:[
              {
                'name':'借金业务11',
                'router':'/name/name1/name',
                'pai':'60',
                'show':true,
                'layer':1,
                'group':'11',
                'permissions':'name:name1:name',
                children:[
                  {
                    'name':'借金业务111',
                    'router':'/name/name1/name',
                    'pai':'60',
                    'show':true,
                    'layer':2,
                    'group':'111',
                    'permissions':'name:name1:name',
                    children:[
                      {
                        'name':'借金业务1111',
                        'router':'/name/name1/name',
                        'pai':'60',
                        'layer':3,
                        'show':true,
                        'group':'1111',
                        'permissions':'name:name1:name',
                        children:[

                        ]
                      }
                    ]
                  }
                ]
              },
              {
                'name':'借金业务12',
                'router':'/name/name1/name',
                'pai':'60',
                'show':true,
                'layer':1,
                'group':'12',
                'permissions':'name:name1:name',
                children:[
                  {
                    'name':'借金业务121',
                    'router':'/name/name1/name',
                    'pai':'60',
                    'layer':2,
                    'show':true,
                    'group':'121',
                    'permissions':'name:name1:name',
                    children:[

                    ]
                  },
                  {
                    'name':'借金业务122',
                    'router':'/name/name1/name',
                    'pai':'60',
                    'layer':2,
                    'group':'1211',
                    'show':true,
                    'permissions':'name:name1:name',
                    children:[

                    ]
                  }
                ]
              }
            ]
          },
          {
            'name':'借金业务2',
            'router':'/name/name1/name',
            'pai':'60',
            'show':true,
            'layer':0,
            'group':'2',
            'permissions':'name:name1:name',
            children:[
              {
                'name':'借金业务21',
                'router':'/name/name1/name',
                'pai':'60',
                'show':true,
                'layer':1,
                'group':'21',
                'permissions':'name:name1:name',
                children:[
                  {
                    'name':'借金业务211',
                    'router':'/name/name1/name',
                    'pai':'60',
                    'show':true,
                    'layer':2,
                    'group':'211',
                    'permissions':'name:name1:name',
                    children:[
                      {
                        'name':'借金业务2111',
                        'router':'/name/name1/name',
                        'pai':'60',
                        'layer':3,
                        'show':true,
                        'group':'2111',
                        'permissions':'name:name1:name',
                        children:[

                        ]
                      }
                    ]
                  }
                ]
              },
              {
                'name':'借金业务22',
                'router':'/name/name1/name',
                'pai':'60',
                'show':true,
                'layer':1,
                'group':'22',
                'permissions':'name:name1:name',
                children:[
                  {
                    'name':'借金业务221',
                    'router':'/name/name1/name',
                    'pai':'60',
                    'layer':2,
                    'show':true,
                    'group':'221',
                    'permissions':'name:name1:name',
                    children:[

                    ]
                  },
                  {
                    'name':'借金业务222',
                    'router':'/name/name1/name',
                    'pai':'60',
                    'show':true,
                    'layer':2,
                    'group':'2211',
                    'permissions':'name:name1:name',
                    children:[

                    ]
                  }
                ]
              }
            ]
          },
        ]
      }
    },
    methods:{
      clickHandler(msg){
        let componentList = list => {
          list.forEach((data,index) => {
            let msgGroup = $(`.tree-name-${data.group}`);
            msgGroup.addClass('tree-name-hide')
            data.open = true
            if(data.children){
              componentList(data.children)
            }
          })
        }
        if(msg.open){
          msg.open = false
          msg.children.forEach((data) => {
            if(data.open){
              let msgGroup = $(`.tree-name-${data.group}`);
              msgGroup.removeClass('tree-name-hide')
              data.open = true
            }
          })
        }else{
          msg.open = true
          componentList(msg.children)
        }
        console.log(this.nameList)
      }
    },
    render (h) {
      let component = []
      let listMap = list => {
        list.forEach((data,index) => {
          component.push(<tr class={'tree-table-name'+' tree-name-'+data.group}>
              <td
                class="tree-table-name"
                style={'padding-left:'+10*data.layer+'px'}>
              <span
                class="tree-table-reset"
                onClick={this.clickHandler.bind(this,data)}>&nbsp;</span>
              {data.name}</td>
              <td>{data.name}</td>
              <td>排序</td>
              <td>可见</td>
              <td>权限标识</td>
              <td></td>
          </tr>)
          if(data.children){
            listMap(data.children)
          }
        })
      }
      listMap(this.nameList)
      return <table
              class="tree-table"
              slot="slot">
              <tr>
              <td>名称</td>
              <td>路径</td>
              <td>排序</td>
              <td>可见</td>
              <td>权限标识</td>
              <td>操作</td>
              </tr>
              {component}
            </table>
    }
  }
</script>
<style>
  .tree-table,.tree-table tr{
    width: 100%;
    border-collapse:collapse;
  }
  .tree-table td {
    width: 16%;
    height: 30px;
    text-align: center;
    border:1px solid #000;
  }
  .tree-table .tree-table-name{
    text-align: left;
    padding-left: 10px;
    box-sizing: border-box;
  }
  .tree-table .tree-name-hide{
    display: none!important;
  }
  .tree-table-reset{
    display: inline-block;
    width: 30px;
    font-size: 30px;
    text-align: center;
    cursor: pointer;
    background: url("../../images/downUp.png") no-repeat center center;
    background-size: 20px 15px;
  }
</style>