在子组件中使用了具名插槽<slot name="qwe" :games="games" x="我是x" y="我是y"></slot>
,
相应的在父组件中使用<template #qwe="data">
的语法来接收插槽内容。
这个语法是ok的,
但是在 Vue 3.2.0 版本之后,还可以使用简化的语法 #qwe
来接收插槽内容,而不需要使用 ="data"
,如下:
在父组件中,可以这样使用具名插槽:
html
<div>
<MySon>
<template #qwe>
<p> {{ qwe.games }} </p>
<p> {{ qwe.x }} </p>
<p> {{ qwe.y }} </p>
</template>
</MySon>
</div>
这里去掉了 ="data"
,直接使用 #qwe
来接收插槽内容,
这种简化的语法可以让模板更加简洁和易读