vue-函数组件&JSX

函数式组件

• 特点：无状态；无生命周期钩子
• 向组件中传递不带 v-slot 指令的子节点时，这些子节点被存储在组件实例中的 $slots.default 中
• children和slots区别： children为当前组件的子节点；slots是一个插槽对象，可以通过v-slot.name指定插槽的内容

export default {
  props: {
    type: String | Number
  },
  methods: {
    handleClick(e) {
      console.log(e.target)
    },
    handleInput(e){
      this.msg = e.target.value
    }
  },
  data(){
    return { msg: '' }
  },
  render() {
    let tag = 'h' + this.type; //标签名
    // jsx语法
    return <tag>
      <input type='text' value={this.msg} onInput={this.handleInput}></input>
      {this.msg}
      <span value={tag} onClick={this.handleClick}>{this.$slots.default}</span>
    </tag>
  }
}


// app.vue
<Level type='1'>h1</Level>