What is a slot? Let’s talk about how to use slots in Vue3

, such as

//父组件 <template> <div> <child>{{ msg }}</child> </div> </template> <script> import { ref } from &#39;vue&#39; import Child from &#39;./Child.vue&#39; const msg = ref(&#39;Hello Juejin&#39;) </script>

andslot contentprevent confusion in subsequent readings:

Same

represents thismsgvariable. Therefore, the child componentslotcan access the data scope of the parent component, whileslot contentcannot access the data of the child component (that is, the two< in the parent component Data in child components cannot be used between ;Child>), this is the so-called rendering scope. The method ofslotpassing parameters toslot contentwill be introduced later

is not provided in the parent component When any

is specified, we can specify the default content for theslotof the child component, such as

//子组件 <template> <div> <slot>我是默认内容</slot> </div> </template> //父组件1 <template> <div> <child></child> </div> </template> <script> import Child from &#39;./Child.vue&#39; </script> //父组件2 <template> <div> <child>Hello Juejin</child> </div> </template> <script> import Child from &#39;./Child.vue&#39; </script>

Display default content

Display provided content

Many times one

cannot meet our needs, we need multipleslots. So there isnamed slot, which is aslotwith a name. To put it simply, the purpose of thisNamed Slotis to trap a carrot and let them stay where they should. For example, a slot withnameis called a named slot.for whichnameis not provided will be implicitly named "default". In the parent component, you can use thev-slot:xxx(can be abbreviated as#xxx) directive'selement to pass the name of the target slot. Go down and match the correspondingslot. For example,

//子组件 <template> <div> <!-- 大萝卜 --> <div> <slot></slot> </div> <!-- 小萝卜 --> <div> <slot></slot> </div> <!-- 中萝卜 --> <div> <slot></slot> </div> </div> </template> //父组件 <template> <div> <child> <!-- #smallTurnip 为v-slot:smallTurnip缩写 --> <template> 小萝卜 </template> <template> 中萝卜 </template> <template> 大萝卜 </template> </child> </div> </template> <script> import Child from &#39;./Child.vue&#39; </script>

So there is no need to care about the order in the parent component. You only need to write the template and name it, and it will automatically go to its corresponding location.

The dynamic slot name is the slot name in the form of a variable. We can modify this variable at any time to show different effects. It is written as

or abbreviated as#[variable name].

//父组件 <template> <div> <child> <!-- 等同于#smallTurnip --> <template> 小萝卜 </template> <template> 中萝卜 </template> <template> 大萝卜 </template> </child> </div> </template> <script> import { ref } from &#39;vue&#39; import Child from &#39;./Child.vue&#39; const slotName = ref(&#39;smallTurnip&#39;) </script>

Said above

It is impossible to access the data of subcomponents, but what if we want to access the status of subcomponents inSlot content?In fact,

can be passed to theslottag by binding properties to theslot content## in the parent component just like passing props to the component. #. First, let’s look at the value transfer method of the default slot

//子组件  //父组件  

注意不能绑定name属性，因为你绑定了name它就成了具名插槽了。同样具名插槽中的name属性也不会传递给插槽内容。因为传递的参数只能在插槽内容中使用，所以这类能够接受参数的插槽就被称为了作用域插槽。

具名作用域插槽

下面再看下具名作用域插槽它的传参方式。它接收参数的方式是通过template标签的指令v-slot的值获取的，所以可以缩写成这样

//父组件   //子组件Child.vue 

这类插槽便是具名作用域插槽啦

写在最后

到这里插槽(slot)的全部用法基本就已经介绍完啦。如果感觉对你有用的话赶紧点赞收藏吧！

（学习视频分享：web前端开发、编程基础视频）