背景:

父组件使用render函数写的,子组件的书写方式随意,想在父组件中使用子组件时写一个作用域插槽.

子组件ChildRender

export default {name: 'ChildRender',props: {msg: String},render(h) {return h('div', [h('div', this.$scopedSlots.file('aaaa','bbbb')),])}
}

App.js组件(父组件)—第一种写法

import ChildRender from '@/components/ChildRender';export default {name: 'App',components: {ChildRender,},methods:{handleClick(val){console.log('点击了',val)}},render(h) {return h('div', { id: 'app' }, [h('div', {}, 'app组件'),h(ChildRender, {props: { msg: 'msg' },scopedSlots: {file: (person, p) => (<button onClick={()=>this.handleClick(person)}>跳转{person}-->{p}</button>),},}),]);},
};

第二种写法

import ChildRender from '@/components/ChildRender';export default {name: 'App',components: {ChildRender,},methods:{handleClick(val){console.log('点击了',val)}},render(h) {return h('div', { id: 'app' }, [h('div', {}, 'app组件'),<ChildRender msg='msg111111111'scopedSlots={{ file: (person, p) => (<button onClick={()=>this.handleClick(person)}>跳转{ person }——{ p }</button>)}}></ChildRender>]);},
};