vue jsx

安装vue

cnpm i -g @vue/cli
cnpm i -g @vue/cli-service-global

创建基本文件

• main.js

import Vue from 'vue';
import App from './App';
new Vue({
  el: '#app',
  render: h => h(App)
})

• App.vue

• label.js

export default {
  props: {
    t: {}
  },
  render() {
    let tag = 'h' + this.t;
    return (
      {this.$slots.default}
    )
  }
}

jsx使用场景

动态标签,组件内部有可能是li，也有可能是span,实现插槽效果

• App.Vue

• List.vue

• ListItem.js

export default {
  props: {
    render: {
      type: Function,
    },
    item: {
      type: String
    }
  },
  render(h) {
    return this.render(h, this.item)
  }
}

插槽

• App.vue

• List.vue

父组件传递组件给子组件

1. 使用插槽
2. 父组件传递render方法给子组件