Skip to content

Instantly share code, notes, and snippets.

@NoelDeMartin
Last active June 17, 2019 19:36
Show Gist options
  • Save NoelDeMartin/7414586bae62f79bcf9bfb9f12b13316 to your computer and use it in GitHub Desktop.
Save NoelDeMartin/7414586bae62f79bcf9bfb9f12b13316 to your computer and use it in GitHub Desktop.
Vue Freezable
<script>
let instancesCount = 0;
const rendersCache = {};
// See live example: https://x3t7g.codesandbox.io/
export default {
props: {
tag: {
type: String,
default: "div"
},
frozen: {
type: Boolean,
default: false
},
frozenProps: {
type: Object,
default: () => {}
}
},
data() {
return {
uuid: instancesCount++
};
},
destroyed() {
delete rendersCache[this.uuid];
},
methods: {
renderChildren(h, children) {
return h(this.tag, {}, children);
}
},
render(h) {
if (this.frozen) {
return this.renderChildren(h, rendersCache[this.uuid] || []);
}
rendersCache[this.uuid] = this.$scopedSlots.default
? this.$scopedSlots.default(this.frozenProps)
: this.$slots.default;
return this.renderChildren(h, rendersCache[this.uuid] || []);
}
};
</script>
@NoelDeMartin
Copy link
Author

NoelDeMartin commented Jun 17, 2019

Example without freezable:
freezable-off

Example with freezable:
freezable-on

See a live example here: https://codesandbox.io/s/vue-freezable-x3t7g

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment