VueJS Slots

Vue.JS Scoped Slots

In Vue.js, slots are an important term that helps us to pass the content or data from the parent or base component to the child component in a more reliable manner. Slots basically enable us to define the placeholders in the child-based component’s template where we actually infer the content of the parent. Slots are mainly used to develop reusable components that can have different data or content without the need to modify the structure of the application.

Syntax:

Below is the syntax of Slots in Vue.js:

Parent Component

<template>
  <div>
    <child-component>
      <p>This content or Data is from the parent component.</p>
    </child-component>
  </div>
</template>

Child Component

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

Example: This example illustrates the basic implementation of VueJS Slots.

Step 1: Initially, execute the below commands in the VSCode terminal to create the Vue project and install the Vue-router package.

vue create slots-example-app
cd slots-example-app
npm install -g @vue/cli@5.0.8
vue create .
npm install vue-router

Step 2: Now, create the directory structure according to the below screenshot:

Step 3: Now, insert the below file code in the respective files.

HTML

<!--src/components/ParentComponent.vue-->
  
<template> 
    <div> 
        <child-component> 
            <p>Content from the parent Component.</p> 
        </child-component> 
    </div> 
</template>

HTML

<!--src/components/ChildComponent.vue-->
  
<template> 
    <div> 
        <slot></slot> 
    </div> 
</template>

HTML

<!--src/views/AboutPage.vue-->
  
<template> 
    <div> 
        <h2>This is About Page</h2> 
        <parent></parent> 
    </div> 
</template> 
  
<script> 
    import Parent from '@/components/ParentComponent.vue'; 
  
    export default { 
        components: { 
            Parent 
        } 
    }; 
</script>

HTML

<!--src/App.vue-->
  
<template> 
    <div id="app"> 
        <router-view /> 
    </div> 
</template> 
  
<script> 
    export default { 
        name: 'App' 
    }; 
</script>

Javascript

// src/main.js 
  
import { createApp } from 'vue'; 
import App from './App.vue'; 
import router from './router'; 
  
createApp(App).use(router).mount('#app');

Javascript

// src/router.js 
  
import { createRouter, createWebHistory }  
    from 'vue-router'; 
import About from '@/views/AboutPage.vue'; 
  
const routes = [ 
    { 
        path: '/', 
        component: About 
    } 
]; 
  
const router = createRouter({ 
    history: createWebHistory(), 
    routes 
}); 
  
export default router;

Package and dependency files for reference:

package.json:

{
    "name": "slots-example-app",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    },
    "dependencies": {
        "core-js": "^3.8.3",
        "vue": "^3.2.13",
        "vue-router": "^4.2.4"
    },
    "devDependencies": {
        "@babel/core": "^7.12.16",
        "@babel/eslint-parser": "^7.12.16",
        "@vue/cli-plugin-babel": "~5.0.0",
        "@vue/cli-plugin-eslint": "~5.0.0",
        "@vue/cli-service": "~5.0.0",
        "eslint": "^7.32.0",
        "eslint-plugin-vue": "^8.0.3"
    },
    "eslintConfig": {
        "root": true,
        "env": {
            "node": true
        },
        "extends": [
            "plugin:vue/vue3-essential",
            "eslint:recommended"
        ],
        "parserOptions": {
            "parser": "@babel/eslint-parser"
        },
        "rules": {}
    },
    "browserslist": [
        "> 1%",
        "last 2 versions",
        "not dead",
        "not ie 11"
    ],
    "_id": "slots-example-app@0.1.0",
    "readme": "ERROR: No README data found!"
}

Step 4: Run the application by using the below command in the terminal.

npm run serve

Output:

What is the difference between slots and scoped slots in VueJS ?

While building the applications or projects in Vue.js, we need to actually change or pass the content or data between the parent (base) and child components so that the user can be able to build reusable User Interfaces. As in ReactJS, there is the concept of props through which we can pass the data between the components, so, in Vue.js, we can perform the same functionality with slots and scoped slots. In this article, we will know the slots and scoped slots along with their syntax and examples. Also, we will see the main differences between these terms with respect to some unique and important parameters.

Tags:

#Vue.JS #JavaScript #Web Technologies

Vue.JS Scoped Slots

VueJS Slots

Syntax:

HTML

HTML

HTML

HTML

Javascript

Javascript

Output:

What is the difference between slots and scoped slots in VueJS ?

Similar Reads