On Proper Use and Care of Object-Orientation

Hi, thanks for your time.

I have an abstract component that needs to take some inputs, format itself (visually, for the DOM, and a little bit of data construction that it will hold internally) and then be inherited into an instance where I set the scoped CSS for position, width, height, etc.

On looking for use of the “extends” keyword I found this post: Appropriate way to extend a component base with template

But I also found that I can use “<slot></slot>” to get some template passing through.

My question is whether I can use the “extends” keyword to get what I want here, or if I need to do it a different way?

Thank you!

I can’t answer that question from this one-line description, since I can’t imagine what you describe, really:

Can you provide more information?

Definitely, and thanks.

Consider the following:

<script>
	// Animal

	export default {
		// Animal stuff
	}
</script>

<template>
	All animals are goodboys.
	<slot></slot>
	This has been a public service announcement.
</template>
<script>
	// Cat

	import Animal from "@/abstract/Animal.vue";

	export default {
		extends: Animal
	}
</script>

<template>
	I am a cat!  Meow!
</template>
// This is the desired output

All animals are goodboys.
I am a cat!  Meow!
This has been a public service announcement.

The goal here is to get the same kind of object inheritance behavior I would expect in, say, a game engine. You have a base “actor” and then you “extend” that actor into an instance of itself where it maintains all of its properties (including default display mode and any configuration you provide, e.g. slot in this case) and then you go on to alter its base behaviors via polymorphism. What I’m wanting is that I can keep its “display properties” (the template) while altering some of its “graphics and sound” (the slot) without having to rewrite all the display properties in the first place (nuking the template and starting over). I don’t see this as a case of it making sense to rewrite all of those display attributes as if they are virtual functions, which is what it sounded like the documentation wants me to do. For now, I’ve used component composition by embedding the animal in the cat, which is horrific from a data structures perspective. Please pardon all the metaphors, it’s early, I hope they make sense.

Thank you again!

I think I have bad news for you:That’s how it’s done, basically.

At least as soon as you want to “inject” more than just plain text, you want to use slots. Whe you use slots, you need to pass the slot content into the component from a a parent.

That’s an estabished pattern that pretty much all frameworks use, no matter which you look at, big or small. So it seems to work well, despite seeming horrible to you.

Of course you can work around that, but that won’t be worth the pain.

Good enough. Thanks for confirmation that my approach was right, that means a lot.