🔥 (#152) 3 Kinds of Props in Vue

二月 14, 2024

Hey there!

I've got a new article for you on the 3 Kinds of Props in Vue.

It's based on content from my course, Reusable Components.

Speaking of which, I have a launch date for you now... March 5th, 2024.

Right now I'm going through all the content and updating it. But here's the thing, I've been going through all of the content in great detail, and it is just as relevant and useful as when I first released the course nearly 4 years ago.

I try to focus on the timeless ideas in everything I do (although some of my tips are highly syntax-driven), and I'm so happy that this one has passed the ultimate test.

The content in the course focuses on patterns and tools to help you write more Reusable Components — patterns and tools that have stood the test of time.

I'm also working on reformatting all of the content for my course platform. This involves me taking all the video-only content and turning it into step-by-step refactoring examples, nice overviews for each pattern and tool, quizzes, and more.

I forgot just how much is in Reusable Components, but isn't blowing past deadlines just part of a software devs job?

(I'm joking, this is something I'm trying very hard to get better at 😜)

Anyway, enjoy your tips and your week!

— Michael

Vue Tips Collection 2

Maybe you just want to stay on top of the latest features, remind yourself of interesting things Vue can do, and get daily inspiration.

Vue Tips Collection is a beautiful book of 118 concise tips, as well as a daily email to get your creative juices flowing.

Check out Vue Tips Collection

🔥 Reactivity and Callbacks

Callback is a bit of a dirty word in Vue, but there are great use cases for them.

Consider a scenario where a parent component needs to react to changes in its children's state. You can use a reactive object provided by the parent and injected by the children to keep track of changes.

Here's an example:

  // Parent component  
    const sharedState = reactive({});  
    provide('sharedState', sharedState);  
      
    // Child component  
    const sharedState = inject('sharedState');

When a child component updates a property of sharedState, Vue's reactivity system ensures that any effects or computed properties that depend on sharedState are automatically re-evaluated.

You can use callbacks to allow child components to register themselves with the parent or to signal the parent to perform an action.

Here's how you might implement a callback with provide and inject:

  // Parent component  
    const registerChild = (child) => { /* ... */ };  
    provide('registerChild', registerChild);  
      
    // Child component  
    const registerChild = inject('registerChild');  
    registerChild(/* child details */);

This pattern is powerful for creating complex interactions between components while keeping the logic encapsulated and manageable.

It's especially useful in the Compound Components pattern.

🔥 Render Functions and Custom Component Options

Vue's render functions and custom component options offer a powerful way to dynamically generate and control the rendering of components.

For instance, you can conditionally render child components or slots based on certain criteria.

Here's a basic render function that conditionally renders slots:

  return () => {  
      const slots = useSlots();  
      const children = [];  
      
      if (props.val && slots.true) {  
        children.push(slots.true());  
      } else if (!props.val && slots.false) {  
        children.push(slots.false());  
      }  
      
      return children;  
    };

Custom component options can be used to tag components with specific properties that can be checked during rendering. This is useful when you have a set of components and you want to treat some of them differently based on their role or type.

For example, you can define a custom option in a child component:

  export default {  
      props: ['if'],  
      conditional: true, // Custom component option  
      setup(props) {  
        // ...  
      },  
    };

And then in the parent component's render function, you can filter child components based on this custom option:

  const slots = useSlots();  
    const conditionalComponents = slots  
      .default()  
      .filter((el) => el.type.conditional);  
      
    const children = [conditionalComponents];

This pattern is particularly useful when creating compound components that need to communicate and share state in a tightly coupled manner. It allows for a clean and declarative approach to rendering while maintaining flexibility and control over the component tree.

🔥 Compound Components (Quickly)

Compound Components are a set of related and highly coupled components that you can assemble to do whatever you need.

They share state tightly, typically using provide and inject, but you could use a composable for this as well depending on your use case.

One common use case is for forms.

Imagine you take a giant FormThatDoesEverything component, but you want to make it more modular and reusable. A big problem you'll run into is passing state between these components, and you'd end up with something like this:

  <Form v-slot="{ formState }">  
      <TextControl :form-state="formState" required />  
      <TextControl :form-state="formState" required />  
      <TextControl :form-state="formState" />  
      <TextControl :form-state="formState" required />  
      <TextControl :form-state="formState" />  
    </Form>

We need to pass state between these components like this because they are tightly coupled. The alternative here would be to keep it as one big component, but we've already decided we don't want that.

But we also don't want to pass lots of props around, as this is just tons of boiler-plate and very error-prone.

Instead, we can use the Compound Component Pattern to improve the API of these form components:

  <Form>  
      <TextControl required />  
      <TextControl required />  
      <TextControl />  
      <TextControl required />  
      <TextControl />  
    </Form>

📜 Prisma with Nuxt 3: Setting up Prisma with Supabase (1 of 5)

Trying to manage database schemas alongside your Nuxt app types can be a challenge.

But with Prisma, most of these problems go away.

It handles all of the boilerplate and coordination, so you just write one single schema that's used in your database and in your TypeScript app.

This is the first article in a series dedicated to showing you how to use Prisma in your Nuxt 3 app.

Check it out here: Prisma with Nuxt 3: Setting up Prisma with Supabase (1 of 5)

💬 The Best Learners

"The best learners are the people who push through the discomfort of being objectively bad at something." — Tommy Collison

🧠 Spaced-repetition: Default Content with Slots

The best way to commit something to long-term memory is to periodically review it, gradually increasing the time between reviews 👨‍🔬

Actually remembering these tips is much more useful than just a quick distraction, so here's a tip from a couple weeks ago to jog your memory.

You can provide fallback content for a slot, in case no content is provided:

  <!-- Child.vue -->  
    <template>  
      <div>  
        <slot>  
          Hey! You forgot to put something in the slot!  
        </slot>  
      </div>  
    </template>

This content can be anything, even a whole complex component that provides default behaviour:

  <!-- Child.vue -->  
    <template>  
      <div>  
        <slot name="search">  
          <!-- Can be overridden with more advanced functionality -->  
          <BasicSearchFunctionality />  
        </slot>  
      </div>  
    </template>

p.s. I also have four products/courses: Clean Components Toolkit, Vue Tips Collection 2, Mastering Nuxt 3, and Reusable Components

搜索

聊搜 - 文章聚合搜索