vue render插槽使用

新建render.jsx

import './render.scss'
import { slotsTest, scopedSlotsTest } from './render-slots/slots'
const buttons = {
  name: 'Buttom',
  data() {
    return {
      text: '测试'
    }
  },
  render() {
    return <el-button type='primary'>{this.text}</el-button>
  }
}
export default {
  name: 'Render',
  components: { slotsTest },
  data() {
    return {
      input: ''
    }
  },
  methods: {
  },
  render() {
    return <div Class='render-box'>
      <el-input vModel={this.input} />
      <buttons/>
      <slots-test>
        <template slot='test'>
          render=====
        </template>
      </slots-test>
      <hr/>
      <scopedSlotsTest form={{ value: 1 }} {...{ scopedSlots: {
        scopeds: ({ item }) => {
          return <el-input vModel={item.value} />
        }
      }}}>
      </scopedSlotsTest>
    </div>
  }
}

创建  slots.jsx

import '../render.scss'

export const scopedSlotsTest = {
  name: 'SlotsTest',
  props: {
    form: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      name: this.form
    }
  },
  watch: {
    name() {
      console.log(this.name, 'watch')
    }
  },
  render() {
    console.log(this.name)
    let slots
    if (this.$scopedSlots.scopeds) {
      slots = <div>
        {this.$scopedSlots.scopeds({
          item: this.name
        })}
      </div>
    } else {
      slots = 'scopedSlots'
    }
    return <div>
      scopedSlots 插槽
      <br/>
      { slots }
    </div>
  }
}
export const slotsTest = {
  name: 'SlotsTest',
  data() {
    return {
    }
  },
  render() {
    let slots
    if (this.$slots.test) {
      slots = this.$slots.test
    } else {
      slots = 'slotsTest'
    }
    return <div>
      slotsTest 插槽
      <br/>
      <div>
        {slots}
        {console.log(this.$slots.test)}
      </div>
    </div>
  }
}