Vue JSX语法怎么使用插槽？

  • Z时代
  • 2024-03-12
  • 分类：IT

Vue JSX语法怎么使用插槽？

我用的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>
        )
    }

回答：

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

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

回答：

this.$slots.default

以上是 Vue JSX语法怎么使用插槽？ 的全部内容， 来源链接： utcz.com/p/936680.html

回到顶部