如何在 vue2 渲染函数中将一些值绑定到 this.$slots.default？

问题描述

众所周知，我们可以使用 this.$slots.default 来创建一个插槽。

如果我们使用 template ，我们可以像这样向槽发送一个值：

<slot name="xiaoming" value="gugugu"></slot> 

但是如何在 vue2 的渲染函数中向 this.$slots.default 发送值？

解决方法

如果只想将值传递给渲染组件中的插槽，您可以这样做：

Vue.component('wrapper',{
  render(h) {
    return h('div',[ 
        this.$scopedSlots.default({
        test: 'works!'
        })
    ])
  }
})
new Vue({
  el: '#app',data: {
    message: 'Hello Vue.js!'
  }
})

就在外面用

<div id="app">
  <p>{{ message }}</p>
  <wrapper>
    <template v-slot="props">
      <p>{{props.test}}</p>
    </template>
  </wrapper>
</div>

继续...