您的当前位置：首页正文

Vue3.0在JSXTSX下如何使用插槽（slot）

来源：尚佳旅游分享网

Vue3.0在JSXTSX下如何使⽤插槽（slot）

在Vue的⽂档上没找到，使⽤搜索引擎搜索也未见有⼈发表过相关的内容。最后我在这个repo的README.md找到了解决⽅案，在这⾥分享给⼤家。

官⽅⽂档⽰例

注意: 在 jsx 中，应该使⽤ v-slots 代替 v-slot

const A = (props, { slots }) => ( <>

{ slots.default ? slots.default() : 'foo' }

);

const App = { setup() {

const slots = {

bar: () => B, };

return () => (

); },};// or

const App = { setup() {

const slots = {

default: () =>

, bar: () => B, };

return () => ; },};

{() => \"foo\ ); },};

解构插槽Props

在template写法中：

v-slot=\"{ href, route, navigate, isActive, isExactActive }\">

{{ route.fullPath }}

在JSX写法中可以则可以是这样：

{{

default: ({ href, route, navigate, isActive, isExactActive }) => ( { route.fullPath } ) }}

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文