vue2中render函数学习思维导图

 vue2之render+jsx从细节入手，彻底掌握

父组件 .vue 

render.js 

import './style.scss' // 单独针对这个组件的样式
const ListItem = {
  name: 'ListItem',
  props: {
    personList: Array
  },
  data() {
    return {
      userInfo: {
        name: '诸葛亮',
        age: '1000'
      }
    }
  },
  render(h) {
    const { personList, userInfo } = this
    return (
      


        

          {
            personList.map((mp, index) => {
              return (
                

                  
{index + 1}
                  
姓名：{mp.name}
                  
年龄：{mp.age}
                
              )
            })
          }
        
        {
          this.$scopedSlots.header({ userInfo })
        }
      
    )
  }
}
const SlotContent = {
  props: {
    userInfo: Object
  },
  render(h) {
    const { userInfo } = this
    console.log(userInfo)
    return (
      

        
这是插槽的
        { userInfo.name}
        { userInfo.age}
      
    )
  }
}
export default {
  name: 'myCom',
  props: {
    msg: String,
    dataList: Array
  },
  data() {
    return {

    }
  },
  methods: {
    handleClick(event, info) {
      console.log(event, 12)
      console.log(info)
      this.$emit('on-change', info)
    }
  },
  render(h) {
    /**
     * 解构之后，可以不用 this.
     * const { msg, handleClick } = this
     */
    const sSlots = {
      header: (props) => 
    }
    return (// 只能有一个根元素
      

        
 this.handleClick($event, 'info') } class='bg' style={{ color: '#10ac84', margin: '20px', padding: '20px' }}>
         我是嘿嘿
        
        

          {this.msg}
        
        

      

    )
  }
}