02 Vue进阶 render和jsx语法使用

一.render语法

 render.js

import Vue from 'vue'

const component = {
  props: ['props1'],
  name: 'comp',
  // template: `
  //   

  //     
  //   
  // `,
  render (createElement) { // 等同上面使用template
    return createElement('div', { 
      style: this.style
      // on: {
      //   click: () => { this.$emit('click') }
      // }
    }, [
      this.$slots.header,
      this.props1
    ])
  },
  data () {
    return {
      style: {
        width: '200px',
        height: '200px',
        border: '1px solid #aaa'
      },
      value: 'component value'
    }
  }
}

new Vue({
  components: {
    CompOne: component
  },
  el: '#root',
  data () {
    return {
      value: '123'
    }
  },
  mounted () {
    console.log(this.$refs.comp.value, this.$refs.span)
  },
  methods: {
    handleClick () {
      console.log('clicked')
    }
  },
  // template: `
  //   
  //     {{value}}
  //   
  // `,
  render (createElement) {
    return createElement(
      'comp-one',
      {
        ref: 'comp',
        props: {
          props1: this.value
        },
        // on: {
        //   click: this.handleClick
        // },
        nativeOn: {
          click: this.handleClick
        }
      },
      [
        createElement('span', {
          ref: 'span',
          slot: 'header',
          attrs: {
            id: 'test-id'
          }
        }, this.value)
      ]
    )
  }
})

二.jsx语法

环境安装：npm i babel-plugin-transform-vue-jsx -D

.babelrc配置 plugins: ["transform-vue-jsx "]

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2",
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime","transform-object-rest-spread"]
}

0. 变量如何绑定 在jsx如何实现

render(){
   return (
    

     {this.show}
    
   )
  }

1.v-if 在jsx如何实现

render(){
   return (
    

     {this.show?'Vue':'React'}
    
   )
  }

写三元表达式只能写简单的，那么复杂的还得用if/else

render(){
  let ifText
  if(this.show){
    ifText=
Vue
  }else{
    ifText=
React
  }
  return (
   

    {ifText}
   
  )
 }

2.v-for 在jsx如何实现

render(){
 return (
  

   {this.list.map((v)=>{
    return 
{v}
   })}
  
 )
}

 3.v-model 在jsx如何实现

4.事件 在jsx如何实现

export default {
  name: 'Tab',
  methods: {
    handleClick () {
      this.$parent.onChange(this.index)
    }
  },
  render () {
    const tab = this.$slots.label || {this.label}

    return (
      

        {tab}
      
    )
  }
}

5. class,style,ref 在jsx如何实现

render (h) {
 return (
  

  
 )
}

6.插槽定义 在jsx如何实现

默认插槽:this.$slots.default

render () {
    return (
      

        

          {this.$slots.default}
        
      
    )
  },

具名插槽:this.$slots.label

//使用页面main.vue

   tab2
   
this is content 2



//tab.vue
render () {
    const tab = this.$slots.label || {this.label}
    return (
      

        {tab}
      
    )
  }

7.jsx中怎么用自定义组件？

很简单，只需要导入进来，不用再在components属性声明了，直接写在jsx中比如

 综合案例：tab.vue