I tried to implement a custom component using Vue's render function. I get some problem to understand how to implement Scoped Slot inside a render function.
In this post, I will share the goal with the example code.
Beginning with the Template
This is the starting point. I had this simple Vue's template that I would convert into a custom component with the render function.
The reason is the classical one when is useful to use render function instead of the template: get more control of the rendering code of the custom component.
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-icon color="primary" dark v-on="on">mdi-note</v-icon>
</template>
<span>Tooltip</span>
</v-tooltip>
Implementation with Vue's render function
This is the implementation with the render function.
const CustomIconTooltip = {
name: "CustomIconTooltip",
props: {
tooltip: String,
},
render(createElement) {
return createElement("v-tooltip", {
attrs: { bottom: true },
scopedSlots: {
// Slot Name
activator: ({on}) => {
return createElement(
"v-icon", {
attrs: { color: "primary", dark: true },
on: on,
},
"mdi-note"
);
},
},
},
this.tooltip
);
},
};
How to use CustomIconTooltip Component
<custom-icon-tooltip :tooltip="My Custom Icon Tooltip" />
Code Example
Top comments (7)
It is really helpful information. thanks. But there came out a problem:
I cannot use the 'append' slot of v-slider in your way. if Possible,please help me.
stackoverflow.com/questions/666307...
Could you give an example?
You can fork the code attached to this post with your code
codepen.io/etino/pen/JjXjWKb
Hello, If possible please check my example,I really need it.codepen.io/radiorz/pen/BaQeBOj
Look for your reply.
Hi @radiorz , I made some tests and it seems that the "append" slot is not fired when used inside the render function.
Take a look at this codepen codepen.io/etino/pen/vYgPwmx
I think you could open an issue in the Vuetify community to understand where is the problem
Coooool. This problem really confuse me , Thank you so much @stefano Giraldi .
codepen.io/radiorz/pen/BaQeBOj
this is my example, i want to replace the append of v-slider (which is a slot of v-slider) but it didnt work.
It was helpful information. thanks.