v-slot相关问题
来源：1-11 作用域插槽
慕莱坞0484978
2021-04-16 22:41:18
插槽第一节课中子组件v-slot:header是用冒号赋值
// template: `
// <layout>
// <template v-slot:header>
// <div>header</div>
// </template>
// <template v-footer>
// <div>footer</div>
// </template>
// </layout>`
但是第二节课中子组件v-slot="slotProps"用等号赋值
template: `
<list v-slot="slotProps">
<div>{{ slotProps.item }}</div>
</list>`
请问老师到底应该用哪种表达方式呢？哪种表达方式最常用？
1回答
-
好帮手慕久久
2021-04-17
同学你好，二者是不同的语法和含义，具体如下：
1、v-slot:header这种写法，是为具体的某个插槽设置内容。以如下代码为例：
子组件是layout，并且定义了两个插槽，分别是header和footer；父组件在使用子组件时，要往插槽中放入内容；由于有两个插槽，所以就需要使用v-slot:header的形式指定每个插槽的内容是什么。
2、v-slot="slotProps"这种写法，是父组件接收插槽传出来的数据：
相对而言，第一种方式见的会多些，第二种方式可能比较少见。
由于二者功能、含义不同，所以同学要分别记录一下；一定要敲下代码，根据运行效果辅助自己理解。
祝学习愉快！
0
相似问题
回答 1