Vue JSX语法怎么使用插槽?

新手在路上
  • 47

我用的vue 2.6.10, 用模板语法写的html

 <van-step v-for="share in sender.shares" :key="share.id">
    <template v-slot:inactive-icon>
      <van-icon name="share-o" class="success" />
    </template>
</van-step>

如果改用JSX语法,这样写

{
    sender.shares.map(share => (
      <van-step key={share.id}>
        <template slot="inactive-icon">
          <van-icon name="share-o" class="success" />
        </template>
      </van-step>
    ))
}

template是HTML的内容模板元素。
上述模板代码中,v-slot是模板语法的语法糖
上述JSX代码中,slot是vue的特殊属性
vue,特殊属性slot

slot属性不是废弃了,为什么还能在JSX中使用?
JSX语法不使用废弃的slot属性,怎么用插槽呢?

原生JSX

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

Vue中JSX

    render(){
        const props = {
            title: 'Feedback',
            value: 1128,
            style: "margin-right: 50px"
        }

        const scopedSlots = {
            suffix: scope => (<a-icon type="like" />)
        }

        return (
            // <statistic title="Feedback"></statistic> // 属性生效
            // <statistic {...props}></statistic>  // 不生效
            <statistic {...{ props, scopedSlots }}></statistic>
        )
    }
回复
阅读 1.5k
2 个回答

目前我的解决方案如下代码,不知道你能不能看懂。


<div>
    {...{scopedSlots: {
        // 已知绑定slot插槽名称
        inactiveIcon: scoped => {
            // do something....
        } 
    }}}
</div>

this.$slots.default

宣传栏