Vue.jsにおけるRender PropとScoped Slotsについて

//「選択された要素だけスタイルを変える」振る舞いを持つコンポーネントです。
//このコンポーネントでは `render` propに渡された関数を実行することによって描画します。
const Selected = {
  props: {
    render: {
      default: h => null
  data() {
    return {
      selectedVal: 0
  methods: {
    select(value) {
      this.selectedVal = value;
  render() {
    return this.$props.render({
      selectedVal: this.selectedVal,
      select: this.select
export default {
  functional: true,
  render: (h, { props }) => (
      <Selected
        render={({ selectedVal, select }) => (
            <input
              type="number"
              onChange={event => select(event.target.value)}
              value={selectedVal}
              {props.items.map((item, i) => (
                /* ここで選択されたものだけスタイルを変えています */
                <li class={selectedVal == i ? "selected-item" : ""} onClick={event => select(i)}> {{ item }} </li>
初見だと分かりづらいかもな、と思うのがこの Selected コンポーネントは自身のViewを持たないということです。render関数内でpropsとして渡されたrenderメソッドを呼び出しているだけで、自身はロジックしか持っていません。もはやこれを"コンポーネント"と呼ぶのが正しいのかすら微妙ですが、パターンとしてはそういう感じなので、今までのコンポーネントに対するメンタルモデルを少し変えてみましょう。
以上が実装例です。Selected コンポーネントのrender propをいじるだけで簡単に「選択された要素だけスタイルを変える」振る舞いを様々なコンポーネントに適用できるようになりました。
続いてScoped Slotを用いて同じ機能を実装してみたいと思います。
Scoped Slot
Slotとは何ぞやという話はドキュメントに譲るとして、Scoped Slotの何が普通のSlotと違うかと言いますと、その名の通り「Slotの配信先のコンポーネントのスコープのデータにアクセスすることができる」という点ですね。

こちらも実装して見たのでご覧ください！
Selected.vue
<template>
    <slot name="selected" :selectedVal="selectedVal" :select="select">
      デフォルトの内容。
    </slot>
</template>
<script>
export default {
  name: "Selected",
  data() {
    return { selectedVal: 0 };
  methods: {
    select(value) {
      this.selectedVal = value;
</script>
        slot="selected"
        slot-scope="{selectedVal, select}"> <!-- ここでSelectedコンポーネントのスコープにある変数・関数にアクセスしています -->
          v-for="(item, index) in props.items"
          :class="selectedVal == index ? 'selected-item' : ''"
          @click="select(index)"
          {{ item }}
    </Selected>
</template>
<script>
  import Selected from './Selected';
  export default {
    name: 'hello',
    components:{
      Selected
</script>
Scoped Slotでも配信先のコンポーネントの変数・関数を扱えるため、それを用いて振る舞いだけを抽出することができることを確認しました。ラップされたコンポーネントのデータや関数にアクセスして振る舞いを追加するというのは、やってることはRender Propと同じだなと思います。
実装例作ってみての結論ですが、どちらのパターンもEvan Youが言っている通り解いてる課題もできることも一緒だなと感じました。どっちが良いとかではなく書き方の違いでしかないので、描画関数を使っているか否かなど、携わっているVueプロジェクトのスタイルに応じて使い分ければ良いのではと思います。
それでは、本記事は以上となります。お読みいただきありがとうございました。
Use a Render Prop!
Use a Vue.js Render Prop!
Getting Your Head Around Vue.js Scoped Slots
Understanding scoped slots in Vue.js