Answers for "what is slot in vue.js"

-1

v-slot="slotProps" in vue

<template> 
	<div class="message">   
		<slot :firstName="firstName"></slot> 
	</div>
</template><script>
export default {  name: "MyMessage",
data() {    return {      firstName: "Luca",    };  
},};
</script>

<style scoped>
.message {  color: red;  text-decoration: underline;}
</style>



<template>
  <my-message>
    <template v-slot="slotProps">
      <h1>Hey {{ slotProps.firstName }}, NotOnlyCSS is awesome!</h1>
    </template>
  </my-message>
</template>
<script>
import MyMessage from "./components/MyMessage.vue";
export default {
  name: "App",
  components: {
    MyMessage,
  },
};
</script>
Posted by: Guest on June-07-2021
-2

what is slot in vue.js

// app.vue
<template>
  <current-user>
    <template v-slot:default="slotProps">{{ slotProps.user.firstName }}</template>    
  </current-user>
</template>
Posted by: Guest on August-16-2021
-2

what is slot in vue.js

// app.vue
<template>
  <current-user v-slot="{user}">
    {{ user.firstName }}
  </current-user>
</template>
Posted by: Guest on August-16-2021

Code answers related to "Javascript"

Browse Popular Code Answers by Language