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

背景:

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

子组件ChildRender

export default {
    name: 'ChildRender',
    props: {
        msg: String
    },
    render(h) {
        return h('div', [
            h('div', this.$scopedSlots.file('aaaa','bbbb')),
        ])
    }
}
1
2
3
4
5
6
7
8
9
10
11

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>),
         },
       }),
    ]);
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

第二种写法

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>
    ]);
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26