October 2020 - Stéphane Reiss
Community started 2 years ago
900+ members
Everyone is welcome to join our slack to discuss Vue, get programming help or just say hi!
Youtube channel: Vue Montreal
Slack: https://vuemontreal.slack.com/
Website: https://vuemontreal.org/
This presentation is a continuation this one: Renderless Components
Components that don’t render anything
<script>
export default {
render() {
return this.$scopedSlots.default();
}
};
</script>
Renderless components relies on Scoped Slots
<template>
<RenderlessComponent>
<div>whatever</div>
</RenderlessComponent>
</template>
default slot
slots
<template>
<RenderlessComponent v-slot="slotProps">
<div>whatever + {{ slotProps }}</div>
</RenderlessComponent>
</template>
default slot with scope from RenderlessComponent
scoped slots
How to update the look of a component while keeping its functionalities, without sacrificing maintainability?
Solution: renderless components
<script>
export default {
props: ['value'],
data() {
return {
newTag: '',
}
},
methods: {
addTag() {
if (this.newTag.trim().length === 0 || this.value.includes(this.newTag.trim())) {
return
}
this.$emit('input', [...this.value, this.newTag.trim()])
this.newTag = ''
},
removeTag(tag) {
this.$emit('input', this.value.filter(t => t !== tag))
}
},
render() {
return this.$scopedSlots.default({
tags: this.value,
addTag: this.addTag,
removeTag: this.removeTag,
inputAttrs: {
value: this.newTag,
},
inputEvents: {
input: (e) => { this.newTag = e.target.value },
keydown: (e) => {
if (e.keyCode === 13) {
e.preventDefault()
this.addTag()
}
}
}
})
},
})
</script>
renderless-tags-input.vue
<script>
import { reactive, computed } from 'vue'
export default {
setup() {
const state = reactive({
count: 0,
double: computed(() => state.count * 2)
})
function increment() {
state.count++
}
return {
state,
increment
}
}
}
</script>
<template>
<button @click="increment">
Count is: {{ state.count }}, double is: {{ state.double }}
</button>
</template>
Calendar events
Source code can be found here:
https://github.com/T0RAT0RA/renderless-components