记：对Vue&JSX渲染的例子

前言

对Vue&JSX渲染的例子，对于子组件不需要template包裹html

---

简单代码如下（示例） 1：

<template>
  <div>
    <div>
      <h4>我是父组件--测试JSX渲染</h4>
    </div>
    <c-test-jsx />
  </div>
</template>
<script>
import CTestJsx from './jsx'
export default {
  name: 'TestJSX',
  components: {
    CTestJsx,
  },
  data() {
    return {}
  },
}
</script>

<script>
export default {
  render: h => {
    return h('div', '我是子组件Jsx渲染')
  },
}
</script>

示例2

代码如下（示例）：

<script>
export default {
  functional: true, // 监听父组件传来的值
  props: {
    row: {
      type: Object,
      default() {
        return {}
      },
    },
    render: {
      type: Function,
      default: Function,
    },
  },
  render: (h, data) => {
    let params = {
      row: data.props.row,
    }
    return data.props.render(h, params) // 根据父组件传来的render渲染
  },
}
</script>

<template>
  <div>
    <div>
      <h4>我是父组件--测试JSX渲染</h4>
    </div>
    <c-test-jsx :render="render" :row="row" />
    <template v-for="(item, i) in jsxDataList">
      <c-test-jsx :key="i" :render="item.render" :row="item.row" />
    </template>
  </div>
</template>
<script>
import CTestJsx from './jsx'
export default {
  name: 'TestJSX',
  components: {
    CTestJsx,
  },
  data() {
    return {
      render: (h, params) => {
        return h('div', `我是${params.row.name}，子组件测试`)
      },
      row: {
        name: 'JSX渲染',
        num: 9,
      },
      jsxDataList: [
        {
          render: (h, params) => {
            return h('div', `我是${params.row.name}，第${params.row.num}子组件测试`)
          },
          row: {
            name: 'v-for--JSX渲染',
            num: 0,
          },
        },
        {
          render: (h, params) => {
            return h('div', `我是${params.row.name}，第${params.row.num}子组件测试`)
          },
          row: {
            name: 'v-for--JSX渲染',
            num: 1,
          },
        },
      ],
    }
  },
}
</script>

---

总结

个人的demo练习，如果有好的例子或者建议也可以在评论区评论