Three Vue slots to solve parent-child component communication

Three Vue slots to solve parent-child component communication

Preface

Slots can be said to be a very important part of Vue. In the process of my learning and practice, when components are used together with slots, they will perform better. It will be more convenient more of the time.

Today I will introduce three types of slots in Vue: default slots, named slots, and scoped slots.

Environment Preparation

Let me first set up an initial environment for everyone to see. Let's talk about this slot step by step.

Just write a category component to render these three types of data respectively.

image-20211120150949138

Category Component

<template>
  <div class="category">
    <h1>{{title}}</h1>
    <ul>
      <li 
      v-for="(item,index) in listData"
      :key="index">{{item}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    listData:Array,
    title: String
  }
}
</script>
<style scoped>
.category{
  width: 200px;
  height: 300px;
  background-color:pink;
}
</style>

App Components

<template>
  <div id="app">
    <Category :listData="games" :title="'Games'" />
    <Category :listData="movies" :title="'Movies'" />
    <Category :listData="foods" :title="'Foods'" />
  </div>
</template>
<script>
import Category from './components/Category.vue'
export default {
  name: 'App',
  components:
    Category
  },
  data () {
    return {
      games:['Cross Fire','QQ Speed','Locke Kingdom'],
      movies:['Hello, Li Huanying','Youth','Fleeting Time'],
      foods:['Shaoyang rice noodles', 'Changsha tea', 'Chongqing hot pot']
    }
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  display: flex;
  justify-content: space-between;
}
</style>

The initial requirement was as shown in the picture above, but now the business requirements have changed. The movie only promotes one of them, and the others are not promoted. The food also only promotes one of them.

As shown below:

image-20211120151432264

How do we make it appropriate?

Do you add if statements in the Category component to make judgments one by one? Or is there a better way? ? ?

It is not possible to make judgments one by one, because the code will become very complicated and difficult to read. In case the business requirements need to be changed in the future, the code will be difficult to change.

Next, let’s look at the default slot.

1. Default Slots

We no longer need to use props to receive data or render in child components, but instead define a slot.

<template>
<div class="category">
    <!-- Define slot, slot default content -->
    <slot>If the parent component does not pass a value, this default is displayed</slot>
    </div>
</template>
<script>
    export default {
        props: {
        }
    }
</script>

App components also changed

<template>
<div id="app">
    <Category>
        <h1>Games</h1>
        <!-- <ul>
<li v-for="(item, index) in games" :key="index">{{ item }}</li>
    </ul> -->
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb352264fa7bfdb6d211f2e71e87cc2c48d85b805.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639931135&t=0b2c6c622c84a1e387196cce8f50455e">
    </Category>
    
    <Category>
        <h1>Movies</h1>
        <img class="movies" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13236694597%2F641.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639931502&t=f89c2197bda9bb129d9404d3c4b30f2f">
        <!-- <ul> -->
        <!-- <li v-for="(item, index) in movies" :key="index">{{ item }}</li> -->
        <!-- </ul> -->
    </Category>
    <Category>
        <h1>Foods</h1>
        <ul>
            <li v-for="(item, index) in foods" :key="index">{{ item }}</li>
    </ul>
    </Category>
    
    <!-- See what is displayed when we have nothing written-->
    <Category>
    </Category>
    </div>
</template>
 
<script>
    import Category from './components/Category.vue'
 
    export default {
        name: 'App',
        components:
            Category
        },
        data () {
            return {
                games:['Cross Fire','QQ Speed','Locke Kingdom'],
                movies:['Hello, Li Huanying','Youth','Fleeting Time'],
                foods:['Shaoyang rice noodles', 'Changsha tea', 'Chongqing hot pot']
            }
        }
    }
</script>

Display effect:

image-20211120152024922

explain:

We wrote a <slot>If the parent component does not pass a value, display this default</slot> tag in the child component, which is equivalent to occupying a position.

In the parent component, we no longer write self-closing and tags <Category/> as before, but instead write non-self-closing and tags <Category> content</Category>. By doing this, Vue will render the content written in the component tag by default, and then put it back to the <slot></slot> in the child component.

Note: CSS styles can be written in either parent components or child components, because they are put back into the child components after rendering. Written in a child component, it will be rendered when put back into the child component.

After writing this, the client suddenly thinks you are so capable, becomes unsatisfied, and starts to cause trouble for you again.

image-20211120152906020

Next, it’s time for the named slots to appear.

2. Named Slots

Since we can think of using one slot, why can't we try using two slots?

Transforming subcomponents

<template>
  <div class="category">
    <!-- You must add a name to the parent component to specify which slot to put it in. This is why it is called a named slot--->
    <slot name="slot1">If the parent component does not pass a value, this default will be displayed</slot>
    <slot name="slot2"></slot>
  </div>
</template>
<script>
export default {
  props: {
  }
}
</script>

Parent Component

<template>
	<div id="app">
    	<Category>
       	 <template slot="slot1">
          	  <h1>Games</h1>
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb352264fa7bfdb6d211f2e71e87cc2c48d85b805.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639931135&t=0b2c6c622c84a1e387196cce8f50455e"
                 />
	</template>
	<template slot="slot2">
		<button >qq login</button>
		<button >Login with WeChat</button>
	</template>
 
</Category>
<Category>
    <template slot="slot1">
		<h1>Movies</h1>
			<img
     class="movies"
     src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13236694597%2F641.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639931502&t=f89c2197bda9bb129d9404d3c4b30f2f"
     />
    </template>
    <template slot="slot2">
		<button >Click to buy tickets</button>
    </template>
</Category>
 
<Category>
    <template slot="slot1">
		<h1>Foods</h1>
		<ul>
    		<li v-for="(item, index) in foods" :key="index">{{ item }}</li>
        </ul>
    </template>
</Category>
 
<!-- See what is displayed when we have nothing written-->
<Category> </Category>
</div>
</template>
 
<script>
    import Category from './components/Category.vue'
 
    export default {
        name: 'App',
        components:
            Category
        },
        data () {
            return {
                games:['Cross Fire','QQ Speed','Locke Kingdom'],
                movies:['Hello, Li Huanying','Youth','Fleeting Time'],
                foods:['Shaoyang rice noodles', 'Changsha tea', 'Chongqing hot pot']
            }
        }
    }
</script>

Effect display

image-20211120153500451

explain:

We can put multiple slots in a component, but when there are multiple slots, they must be named and specified in the parent component so that they will not be missing.

3. Scoped Slots

Scoped slots are slightly different from the previous ones. Previously, the data was in the parent component, while scoped slots are in the child component, which in turn is passed to the parent component, allowing the parent component to define the structure for rendering.

Modified subcomponents

<template>
  <div class="category">
    <slot name="slot1">If the parent component does not pass a value, this default will be displayed</slot>
    <slot name="slot2" :foods="foods">If the parent component does not pass a value, this default value will be displayed</slot>
  </div>
</template>
<script>
export default {
  data () {
    return {
      foods:['Shaoyang rice noodles', 'Changsha tea', 'Chongqing hot pot']
    }
  }
}
</script>

Parent Component

<template>
  <div id="app">
    <Category>
      <template slot="slot1">
        <h1>Foods</h1>
      </template>
      <template slot="slot2" scope="listData">
        <!--If you don't know, we can output what this is. {{listData}} -->
        <ul>
          <li v-for="(item, index) in listData.foods" :key="index">
            {{ item }}
          </li>
        </ul>
      </template>
    </Category>
    <Category>
      <template slot="slot1">
        <h1>Foods</h1>
      </template>
      <template slot="slot2" scope="listData">
        <ol>
          <li v-for="(item, index) in listData.foods" :key="index">
            {{ item }}
          </li>
        </ol>
      </template>
    </Category>
    <Category>
      <template slot="slot1">
        <h1>Foods</h1>
      </template>
      <template slot="slot2" scope="listData">
          <h4 v-for="(item, index) in listData.foods" :key="index">
            {{ item }}
          </h4>
      </template>
    </Category>
    <Category>
      <template slot="slot1" scope="listData">	
{{listData}}
      </template>
    </Category>
  </div>
</template>
 
<script>
import Category from './components/Category.vue'
 
export default {
  name: 'App',
  components:
    Category
  }
}
</script>

Rendering

image-20211120154438477

I didn't think of any usage scenarios for this kind of thing during my learning and practice, but there are cases on the official website. I think it must have a reason for existence, but I just don't have enough knowledge and haven't been able to take advantage of it.

explain:

The child component passes the value to the parent component through: variable name = "defined data", and the parent component receives it with <template slot = "slot2" scope = "do not use the same name as the name passed by the child component">, because there is one more layer before it reaches

<template slot="slot2" scope="listData">
<!--If you don't know, we can output what this is. {{listData}} -->
<ul>
    <li v-for="(item, index) in listData.foods" :key="index">
        {{ item }}
    </li>
    </ul>
</template>

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:
  • Detailed explanation of seven component communication methods of Vue3
  • Details of 7 kinds of component communication in Vue3
  • Vue component communication method case summary
  • Eight examples of how Vue implements component communication
  • Detailed explanation of component communication in Vue (father-child component, grandfather-grandson component, brother component)
  • Several ways of communication between Vue components

<<:  Introduction to HTML link anchor tags and their role in SEO

>>:  How to optimize a website to increase access speed update

Recommend

Linux Domain Name Service DNS Configuration Method

What is DNS The full name of DNS is Domain Name S...

Implementation of iview permission management

Table of contents iview-admin2.0 built-in permiss...

XHTML Getting Started Tutorial: Using the Frame Tag

<br />The frame structure allows several web...

Design Theory: Ten Tips for Content Presentation

<br /> Focusing on the three aspects of text...

Code for aligning form checkbox and radio text

Alignment issues like type="radio" and t...

MySQL 5.7.25 compressed version installation and configuration method graphic tutorial

This article shares the installation and configur...

25 Ways and Tips to Increase Web Page Loading Speed

Introduction <br />Not everyone has access t...

Deploy grafana+prometheus configuration using docker

docker-compose-monitor.yml version: '2' n...

Vue implements the method example of tab routing switching component

Preface This article introduces the use of vue-ro...

CSS makes tips boxes, bubble boxes, and triangles

Sometimes our pages will need some prompt boxes o...

VMware Workstation is not compatible with Device/Credential Guard

When installing a virtual machine, a prompt appea...

iframe parameters with instructions and examples

<iframe src=”test.jsp” width=”100″ height=”50″...

How to modify create-react-app's configuration without using eject

1. Why is eject not recommended? 1. What changes ...

Detailed explanation of Nginx's connection limit configuration for IP addresses in a network segment

The so-called connection limit in Nginx is actual...

Implementation example of specifying container ip when creating a container in docker

When Docker creates a container, it uses the brid...