背景:
父组件使用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>
]);
},
};