v-slot的用法(去除了slot和slot-scope)
- 具名插槽
根组件
<div id="app">
<Son>
<template v-slot:name><!-- 这里注意是v-slot:子组件的插槽名 -->
<span>替换了</span>
</template>
</Son>
</div>
子组件
<div>
我是子组件
<slot name="name">我是默认名称:{{name}}</slot>
</div>
- 作用域插槽
<div id="app">
<Son>
<template v-slot:son="msg"><!--这里看清楚噢-->
<span>{{msg}}</span>
</template>
</Son>
</div>
<div>
我是子组件
<slot name="son" :data="name">我是默认名称:{{name}}</slot>
</div>
- 将以前的简化了一些,替换了
slot
、slot-scope
,2.6.0+ 就废弃了这两个指令 - 具名插槽:
v-slot:子组件插槽的name
- 作用域插槽:
v-slot:子组件的插槽name=“自定义名”
配合子组件的插槽上的属性:自定义="变量"