如何將內容傳遞到渲染 function（功能組件）中的插槽 - Vue

Question

功能按鈕組件：

const Button = createElement('button', {}, [slots().icon ? createElement('span', slots().icon[0].text) : null])

上面使用 Button 的另一個功能組件：

createElement(Button, {}, ['this goes to children'])

但這會將文本呈現給不在span內的this goes to children ，因為我將它包裹在上面。 如何從另一個createElement()將內容放入Button組件的插槽中？

使用模板很容易：

<template>
  <Button>
    <template #icon>This would be wrapped inside span</template>
  </Button>
</template>

更新 1

我必須在數據屬性中使用slot: 'name-of-the-slot'鍵：

const icon = createElement('span', { slot: 'icon' }, 'text inside span')
createElement(Button, {}, [icon])

沒有成功。 它甚至有效嗎？ 在 Vue 存儲庫中創建了一個錯誤報告： https://github.com/vuejs/vue/issues/11519

半解決方案

在 Posva 的幫助下：

export default {
  name: "Wrapper",
  functional: true,
  render(h) {
    return h(Button, { scopedSlots: {
      icon: () => h('span', {}, 'its from wrapper')
    } });
  }
};

export default {
  name: "Button",
  functional: true,
  render(createElement, { scopedSlots }) {
    return createElement("button", {}, scopedSlots.icon(null));
  }
};

ScopedSlots 是關鍵。

另外不要忘記添加檢查，如果此插槽存在，例如：

return createElement("button", {}, scopedSlots.icon ? scopedSlots.icon(null) : null)

Answer 1

使用模板的組件：

MyButton.vue

<template>
  <div>
    <slot name="left"></slot>
    <button>
      <slot v-bind:person="person">
        <span>按鈕</span>
      </slot>
    </button>
    <slot name="right" v-bind:age="person.age"></slot>
  </div>
</template>

<script>
  export default {
    name: 'MyButton',
    data() {
      return {
        person: {
          name: 'jack',
          age: 23,
        },
      }
    },
  }
</script>

在模板中使用 MyButton：

 <MyButton>
   <template #right="{age}">
     <span>button rigt side. I am  {{ age }} years</span>
   </template>
   <template v-slot="{ person }">this is a button，{{ person }}</template>
   <template #left>
     <span>button left side</span>
   </template>
</MyButton>

在渲染 function 中使用它：

import MyButton from './MyButton.vue'
export default {
  name: 'UseButton',
  render(h) {
    const slotLeft = h('template', { slot: 'left' }, 'in the left of button')
    const slotRight = h('template', { slot: 'right' }, 'right')
    const slotDefault = h('template', { slot: 'default' }, 'default slot')
    const children = [slotRight, slotLeft, slotDefault]
    // normal slots in third parms, any order work well
    return h(MyButton, {}, children)
  },
}

從渲染 function 中的作用域插槽獲取數據：

import MyButton from './MyButton.vue'
export default {
  name: 'UseButton',
  render(h) {
    const slotLeft = h('template', { slot: 'left' }, 'normal slot with name left')
    const children = [slotLeft]
    return h(
      MyButton,
      {
       // scopedSlot in the second param
        scopedSlots: {
          // props come from MyButton inside
          default: props => {
            console.log(props)
            const { person } = props
            const text = `defaul scopedSlot，${JSON.stringify(person)}`
            // use h
            return h('span', {}, text)
          },
          right: props => {
            console.log(props)
            const { age } = props
            // use jsx
            return <span>in the right,I am {age} years</span>
          },
        },
      },
      // normal slot
      children
    )
  },
}

使用 jsx 或 js 實現MyButton.vue 。

MyButton.jsx

export default {
  name: 'MyButton',
  data() {
    return {
      person: {
        name: 'jack',
        age: 23,
      },
    }
  },
  render(h) {
    const { left, right, default: _defaultSlot } = this.$scopedSlots
    // checek the default exist or not
    const defaultSlot = (_defaultSlot && _defaultSlot({ person: this.person })) || <span>按鈕</span>
    const leftSlot = (left && left()) || ''
    const rightSlot = right(this.person)
    const button = h('button', {}, [defaultSlot])
    //  jsx make structure more clear
    return (
      <div>
        {leftSlot}
        {button}
        {rightSlot}
      </div>
    )
  },
}

使用 jsx 的功能組件：

FunctionalButton.jsx

export default {
  name: 'FunctionalButton',
  functional: true,
  props: {
    person: {
      type: Object,
      default: () => ({ name: 'jack', age: 23 }),
    },
  },
  // NO DATA in functional component
  // data() {
  //   return {
  //     person: {
  //       name: 'jack',
  //       age: 23,
  //     },
  //   }
  // },
  render(h, { props, scopedSlots }) {
    const { left, right, default: _defaultSlot } = scopedSlots
    const defaultSlot = (_defaultSlot && _defaultSlot({ person: props.person })) || <span>按鈕</span>
    const leftSlot = (left && left()) || ''
    const rightSlot = right(props.person)
    const button = h('button', {}, [defaultSlot])
    return (
      <div>
        {leftSlot}
        {button}
        {rightSlot}
      </div>
    )
  },
}

Answer 2

使用動態組件為我解決了一個問題，您可以像這樣簡單地將渲染 function 傳遞給“is”屬性

<div v-for="slot in a.tabs"><component :is="slot.renderFn"></component></div>