具名插槽

就是可以在组件中，可以定义插槽的名字

1
<slot name="haha"></slot>

然后可以在调用该组件的父组件中通过<template v-slot="haha">...</template>来插入新的结构标签到组件中。

作用域插槽。

他的最大特点是可以从子组件传递数据到父组件。通过:标记，和prop类似，将具体的对象发送到父组件中使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//子组件
<slot name="haha" :games="games"  :msg="msg"></slot>
//父组件
//这里的test是可以任意取名的。他会将子组件传递过来的所有值全部接受，然后你看也获取其中的对象
<template v-slot="haha" scope ="test">
<ul v-for="(game,index) in test.games" :key="index">
    <li v-model = "game.id"></li>
</ul>
</template>
//也可以直接使用插槽语法（es6）
<template v-slot="haha" scope ="{games}">
//这里的test是可以任意取名的。他会将子组件传递过来的所有值全部接受，然后你看也获取其中的对象
<ul v-for="(game,index) in games" :key="index">
    <li v-model = "game.id"></li>
</ul>
</template>

vue更新了新语法。

对于具名插槽和作用域插槽都用更新的使用。
都通过v-slot:”插槽名”=”{参数名称}”
例如:v=slot:haha=”{games}”