Vue.js 如何在JSX中获取vue插槽属性？_Vue.js_Jsx_Slot

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

vue.js

Vue.js 如何在JSX中获取vue插槽属性？,vue.js,jsx,slot,Vue.js,Jsx,Slot,我使用模板语法编写了一个子组件，子组件有一个将“item”属性传输到父组件的插槽，但父组件使用JSX语法，现在我很难在JSX中获取“item”属性。任何帮助都将不胜感激 //child.vue //parent.vue 导出默认值{ 渲染（）{ 返回( {item}//未定义项 ) } } 你能试试这个吗 // child.vue <template> <Autocomplete> <template v-slot="{ item }&quo

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

//child.vue

//parent.vue
导出默认值{
渲染（）{
返回(
{item}//未定义项
)
}
}

你能试试这个吗

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

//child.vue

在父组件中：

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

//JSX
{
渲染（）{
返回(
{{item}}//item未定义
)
}
}

你能试试这个吗

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

//child.vue

在父组件中：

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

//JSX
{
渲染（）{
返回(
{{item}}//item未定义
)
}
}

您可以将插槽作为

scopedSlots

prop（Vue 2）通过

default

功能（表示默认插槽）。注意，对于非默认命名插槽（例如，

“mySlot”

，如示例所示），这一点尤其需要：

导出默认值{
render（）{
返回(
{item.foo}，
mySlot:（{myProp}）=>{myProp}，
}
}
}
/>
)
}
}

或者，您可以在

正文中传递默认插槽渲染方法：

导出默认值{
render（）{
返回(
{（{item}）=>{item.foo}
)
}
}