bigdata questions
what is the benefits of compositon api
what is the vue ssr
vue ssr
apis load at server not at ui
meanwhile show static data
complete wordpress development course
https://drive.google.com/drive/u/0/folders/1tnOqp3maCiEHUV8QrxKj-rzev2cD2993?fbclid=IwAR33nthTFczEOcEYs0Npgc02Wu3ckOxi4FkLzwFJQvUvayOR2zv3CUVKlq8
vuejs slots
\
take a component
<component-name></component-name>
in html <a>ssfs</a>
like this we can write in betewen ending and starting tag <component-name>name</compoinent-name>
thats called slot
slots is a defailt html tag and it represents placeholder in the compoinetn tree
with attribut emethod
<app-button
name="vamsi"
></app-button>
<template>
<button>{{name}}</button>
</template>
<script>
export default {
name: 'App Button',
props:{
name:{
type: String,
required: true,
},
},
with html mehtod
<app-slot-button
>press me</app-slot-button>
<template>
<button><slot></slot></button>
</template>
everything we pass via attributes,props,eventlistenrs,slots
<app-slot-button
@click="log"
const log = () =>{
console.log('works');
};
component
<template>
<button v-on="$listeners"><slot></slot></button>
</template>
<script>
export default {
name: 'App Slot Button',
props:{
},
components: {
},
data() {
return {
};
},
mounted(){
},
computed: {
},
methods:{
},
};
</script>
<app-slot-button
>press me</app-slot-button>
named slots
multiple slots in components
named slots
<app-layout
>
<template v-slot:header>slots are awesome </template>
<template v-slot:main>slots are main </template>
<app-slot-button
@click="log"
>press me</app-slot-button>
<template v-slot:footer>slots are footer </template>
</app-layout>
import AppSlotButton from '../../components/AppSlotButton.vue';
import AppLayout from '../../components/AppLayout.vue';
const log = () =>{
console.log('works');
};
<template>
<button>
<slot></slot></button>
</template>
<script>
export default {
name: 'App Slot Button',
props:{
},
components: {
},
data() {
return {
};
},
mounted(){
},
computed: {
},
methods:{
},
};
</script>
<template>
<header> <slot name="header" /></header>
<main> <slot name="main" /> </main>
<footer> <slot name="footer" /> </footer>
<button>
<slot></slot></button>
</template>
<script>
export default {
name: 'App Layout',
props:{
},
components: {
},
data() {
return {
};
},
mounted(){
},
computed: {
},
methods:{
},
};
</script>
short hand for named slots
<app-layout
>
<template #header>slots are awesome </template>
<template #main>slots are main </template>
<app-slot-button
@click="log"
>press me</app-slot-button>
<template #footer>slots are footer </template>
</app-layout>
s
reuable vuesjs component with slots
passing data to parent component using scoped slot
attribute bound to slot elements that are alled slot props
<slot name="footer" :item="item" />
opentext
Refactor User List Component Using Slots
falll back content to slots
user.location.country
slot with condition
if slot not required we wil l not call that slot
in some components
with count
usign scoped slots with function
pass data to parent compoent
app.vue
https://github.com/vueschool/reusable-vuejs-components-with-slots
s
app.vue
<template>
<div class="page">
<select v-model="selected">
<option
v-for="option in options"
:value="option.value"
:key="option.value">
{{option.label}}
</option>
</select>
<AppUserList >
<template #secondrow="slotProps">{{slotProps}}</template>
<template #loading>
<b-spinner class="align-middle"></b-spinner>
</template>
</AppUserList>
</div>
</template>
<script>
import AppUserList from "../../components/AppUserListThree";
import AppUserCardsList from "../../components/AppUserCardsList";
export default {
components: {
AppUserList,
AppUserCardsList
},
data() {
return {
selected: 'first',
options: [
{ value: 'first', label: 'first name'},
{ value: 'last', label: 'last name'},
{ value: 'full', label: 'fullname'},
{ value: 'fullWithTitle', label: 'fullname with title'},
]
}
},
methods: {
getEmail(user) {
return user.email;
}
}
};
</script>
<style>
.page {
padding: 2rem;
}
.page > * + * {
margin-top: 2rem;
}
</style>
appuserlist.vue
<template>
<section>
<slot name="title">Users</slot>
<slot
name="userlist"
:count="data.results.length"
:list="data.results"
:remove="remove"
v-if="state === 'loaded'"
>
<ul class="userlist">
<li v-for="item in data.results" :key="item.email">
<slot name="listitem" :user="item">
<div>
<img
width="48"
height="48"
:src="item.picture.large"
:alt="item.name.first + ' ' + item.name.last"
/>
<div>
<div>{{ item.name.first }}</div>
<slot name="secondrow" :item="item"></slot>
<!-- {{secondrow(item)}} -->
</div>
</div>
</slot>
</li>
</ul>
</slot>
<slot v-else name="loading">
loading...
</slot>
<slot v-if="state === 'failed'" name="error">
Oops, something went wrong.
</slot>
</section>
</template>
<script>
const states = {
idle: "idle",
loading: "loading",
loaded: "loaded",
failed: "failed"
};
export default {
props: {
secondrow: {
type: Function,
default: () => {}
}
},
data() {
return {
state: "idle",
data: undefined,
error: undefined,
states
};
},
mounted() {
this.load();
},
methods: {
async load() {
this.state = "loading";
this.error = undefined;
this.data = undefined;
try {
setTimeout(async () => {
const response = await fetch("https://randomuser.me/api/?results=5");
const json = await response.json();
this.state = "loaded";
this.data = json;
return response;
}, 1000);
} catch (error) {
this.state = "failed";
this.error = error;
return error;
}
},
remove(item) {
this.data.results = this.data.results.filter(entry => entry.email !== item.email)
}
}
};
</script>
<style scoped>
.userlist {
margin: 10px;
}
.userlist img {
border-radius: 50%;
margin-right: 1rem;
}
.userlist li + li {
margin-top: 10px;
}
.userlist li > div {
display: flex;
align-items: center;
}
.userlist li div div {
flex: 1;
}
</style>
<template #listitem="{user}">
{{user}}
</template>
<slot name="listitem" :user="item">
<div>
<img
width="48"
height="48"
:src="item.picture.large"
:alt="item.name.first + ' ' + item.name.last"
/>
<div>
<div>{{ item.name.first }}</div>
<slot name="secondrow" :item="item"></slot>
<!-- {{secondrow(item)}} -->
</div>
</div>
</slot>
<template #userlist="{list, count}">
{{count}}
{{list}}
</template>
<slot
name="userlist"
:count="data.results.length"
:list="data.results"
:remove="remove"
v-if="state === 'loaded'"
>
<ul class="userlist">
<li v-for="item in data.results" :key="item.email">
<slot name="listitem" :user="item">
<div>
<img
width="48"
height="48"
:src="item.picture.large"
:alt="item.name.first + ' ' + item.name.last"
/>
<div>
<div>{{ item.name.first }}</div>
<slot name="secondrow" :item="item"></slot>
<!-- {{secondrow(item)}} -->
</div>
</div>
</slot>
</li>
</ul>
</slot>
<template #userlist="{list, count}">
{{count}}
<AppUserCardsList :list="list"/>
</template>
<template #secondrow="{remove, item:user}">
<button @click="remove(user)">{{user.name.first}}<button>
</template>
remove the user
<template #secondrow="{remove, item:user}">
<button @click="remove(user)">{{user.name.first}}</button>
</template>
<slot name="secondrow" :item="item" :remove="remove"></slot>
remove(item) {
this.data.results = this.data.results.filter(entry => entry.email !== item.email)
}
========
s
Subscribe to:
Posts (Atom)
Event listening in react
How we can listen to som eevents some envents fire like click or automatically user enters into input button , that is event on word type i...
-
https://drive.google.com/drive/u/0/folders/1tnOqp3maCiEHUV8QrxKj-rzev2cD2993?fbclid=IwAR33nthTFczEOcEYs0Npgc02Wu3ckOxi4FkLzwFJQvUvayOR2zv3C...
-
When you have two individual components in Vue.js that are not directly related as parent and child components, you can still establish co...
-
vuejs is an open source model view view model frontend javascript framework for building user interfaces and single page applications comp...
