vue组件render函数中作用域插槽使用方式

本文主要是介绍vue组件render函数中作用域插槽使用方式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

背景:

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

这篇关于vue组件render函数中作用域插槽使用方式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---