新建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> } }