Basic usage examples of Vue named slots

Preface

Named slots are bound to elements using the "name" attribute in the slot.

Notice:

1. If no match is found, put it in an anonymous slot

2. The rendering order of named slots depends entirely on the template, not on the order of elements in the parent component

Vue's anonymous slot (default slot)

Parent Component

<div>
 <myslot>I just now</myslot>
</div>

Subcomponents

<div>
 <slot><slot>
</div>

Vue's named slots

Parent Component

<div>
 <myslot>
  <template #one>Piggy is a big fat cat</template>
  <template #two>They are all big assholes</template>
  <template #three>Mimi is a heartless little bastard</template>
  I just now
</div>

Subcomponents

<div>
 <slot name="one"></slot>
 <slot><slot>
 <slot name="two"></slot>
 <slot name="three"></slot>
</div>

Rendered (in approximate order) is

vue scoped slots

Explain scope slots in plain language: parent components can read the data carried by the corresponding slots of child components through slots.

<div>
	<myslot>
		<template #oneData="oneData">
			<div>{{oneData.one.message}}</div>
		</template>
		<template #two>They are all big assholes</template>
		<template #three>Mimi is a heartless little bastard</template>
		I just </myslot>
</div>

Subcomponents

<div>
 <slot name="one" :data='one'></slot>
 <slot><slot>
 <slot name="two"></slot>
 <slot name="three"></slot>
</div>

<script>
 export default {
  data() {
   return {
    one: {
     message: 'This is the data message of the subcomponent',
       },
   };
  },
 }
</script>

Code Optimization

<div>
 <myslot>
  <template #oneData="{oneData}">
   <div>{{oneData.message}}</div>
  </template>
  <template #two>They are all big assholes</template>
  <template #three>Mimi is a heartless little bastard</template>
  I just now
</div>

Subcomponents

<div>
 <slot name="one" :oneData='one'></slot>
 <slot><slot>
 <slot name="two"></slot>
 <slot name="three"></slot>
</div>

<script>
 export default {
  data() {
   return {
    one: {
     message: 'This is the data message of the subcomponent',
       },
   };
  },
 }
</script>

Summarize

This is the end of this article about the basic use of vue named slots. For more relevant vue named slot content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Understanding and example code of Vue default slot
Detailed explanation of anonymous slots and named slots in Vue
Vue uses slots to distribute content operation examples [single slot, named slot, scoped slot]
Detailed explanation of how to use Vue anonymous, named and scoped slots
Detailed explanation of the usage of scoped slots in Vue.js slots
About VUE's compilation scope and slot scope slot issues
Detailed explanation of Vue scope slot implementation method and function
Vue default slot, named slot, scope slot definition and usage

<<: Detailed explanation of two methods for setting global variables and session variables in MySQL

>>: Do you know how many connections a Linux server can handle?