如何在 JSX 中获取 vue 插槽属性？

问题描述

我写了一个使用模板语法的子组件，子组件有一个插槽可以将“item”属性传输到父组件，但是父组件使用 JSX 语法，现在我无法在 JSX 中获取“item”属性。任何帮助将不胜感激！

// child.vue
<template>
  <Autocomplete>
    <template slot-scope="{ item }">
      <slot :item="item" />
    </template>
  </Autocomplete>
</template>

// parent.vue
export default {
  render () {
    return (
      <Child>
        <template slot-scope='{item}'>
          <span>{item}</span> // item is not defined 
        </template>
      </Child>
    )
  }
}

解决方法

你能试试这个吗？

// child.vue
<template>
  <Autocomplete>
    <template v-slot="{ item }">
      <slot :item="item" />
    </template>
  </Autocomplete>
</template>

在父组件中：

// JSX
{
  render () {
    return (
      <Child>
        <template v-slot="{ item }">
          <span>{{item}}</span> // item is not defined 
        </template>
      </Child>
    )
  }
}

,

您可以使用 scopedSlots 函数（代表默认插槽）将插槽作为 default 道具（Vue 2）传递。请注意，这对于非默认命名插槽（例如，示例中所示的 "mySlot"）尤其需要：

export default {
  render() {
    return (
      <Child
        {
          ...{
            scopedSlots: {
              default: ({ item }) => <span>{ item.foo }</span>,mySlot: ({ myProp }) => <h1>{ myProp }</h1>,}
          }
        }
      />
    )
  }
}

或者您可以在 <Child> 正文中传递默认插槽渲染方法：

export default {
  render() {
    return (
      <Child>
        { ({ item }) => <span>{ item.foo }</span> }
      </Child>
    )
  }
}