前言:最近在学vue,发现slot插槽已经在vue2.6就被舍弃了,新增了v-slot用法,去看了官网实在没看懂如何上手,特此写了这个,方便小白一看就懂。
子组件使用插槽给父组件预留施展空间。
-
具名插槽命名方式还和以前一样写。
父组件使用子组件预留出来的插槽空间,控制子组件并向子组件输入内容。

使用注意事项:
- 插槽里面的<template></template>标签必须必须得有,且要搭配v-slot使用,其他标签搭配v-slot是不行的。
- 在插槽里,只能是template标签的内部包含其它标签,(比如我这里截图的,template标签包含着一个<div>你好</div>),如果用div包裹template是不行的。
- 它还有个语法糖简写形式,v-slot:name等价于#name,也就是用一个#号代替v-slot:

网友评论