Vue.JS Scoped Slots

Difference between Slots and Scoped slots:

In Vue.js, Scoped Slots are also called Named Slots, this s because they enable us to pass the content or the data from the base or parent component to the child components with dynamic data. Alike Slots, it is not just static oriented, but we can pass the dynamic data from parent to child. This allows the child component to actually render the data which is based on the content passed by the parent, which makes it more data-driven and customizable.

Syntax:

Below, is the syntax of Slots in Vue.js:

Parent Component

<template>
  <div>
    <child-component>
      <template #default="slotProps">
        <p>{{ slotProps.content}}</p>
      </template>
    </child-component>
  </div>
</template>

Child Component

<template>
  <div>
    <slot name="default" :message="content"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: "This is the Dynamic Content from the Child Component"
    };
  }
};
</script>

Example: This example illustrates the Scoped Slots in VueJS.

Step 1: Create the directory structure, & insert the below file code in the respective files.

HTML

<!-- src/components/ParentComponent.vue -->
<template> 
    <div> 
        <label for="messageInput"> 
              Enter a message: 
          </label> 
        <input v-model="userMessage"
               id="messageInput" 
               type="text" /> 
        <child-component :user-message="userMessage"> 
            <template #dataSlot="slotProps"> 
                <p>{{ slotProps.data }}</p> 
                <button @click="reverseMessage(slotProps.data)"> 
                      Reverse Message 
                  </button> 
            </template> 
        </child-component> 
    </div> 
</template> 
  
<script> 
    import ChildComponent from './ChildComponent.vue'; 
  
    export default { 
        components: { 
            ChildComponent 
        }, 
        data() { 
            return { 
                userMessage: "Hello from ParentComponent" 
            }; 
        }, 
        methods: { 
            reverseMessage(message) { 
                if (message) { 
                    this.userMessage =  
                      message.split('').reverse().join(''); 
                } 
            } 
        } 
    }; 
</script>

HTML

<!-- src/components/ChildComponent.vue -->
  
<template> 
    <div> 
        <slot name="dataSlot" :data="userMessage"></slot> 
    </div> 
</template> 
  
<script> 
    export default { 
        props: { 
            userMessage: String 
        } 
    }; 
</script>

HTML

<!--src/views/HomePage.vue -->
  
<template> 
    <div> 
        <ParentComponent></ParentComponent> 
    </div> 
</template> 
  
<script> 
    import ParentComponent  
        from '@/components/ParentComponent.vue'; 
  
    export default { 
        components: { 
            ParentComponent 
        } 
    }; 
</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/index.js 
  
import { createRouter, createWebHistory } from 'vue-router'; 
import HomePage from '../views/HomePage.vue'; 
  
const routes = [ 
    { 
        path: '/', 
        name: 'Home', 
        component: HomePage 
    } 
]; 
  
const router = createRouter({ 
    history: createWebHistory(process.env.BASE_URL), 
    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 2: 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

VueJS Slots

Difference between Slots and Scoped slots:

Vue.JS Scoped Slots

Syntax:

HTML

HTML

HTML

HTML

Javascript

Javascript

package.json

Output:

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

Similar Reads

Contact Us