what

In addition to using the if statement to make conditional decisions, another common programming language is switch.

In VUE, the official has helped us to implement the V-if directive, but there is no switch yet. Can we implement one by ourselves?

This article explores this issue and eventually implements a Switch component

Is beginning to the end

How do we want users to use the Switch

Compare this with js:

Users can apply the Switch function through a VSwitch component

Case is used to determine the matching conditions

Each case is then matched by a template

So now that we’ve defined how the user is going to use it, all that’s left is implementation, right

The idea behind this step is to determine the specification of the component, or in other words, its interface

how

So how do we do that?

Let’s start by thinking about the switch’s capabilities

Split Switch function

One template that is equal to the case value should be displayed, and nothing else should be displayed

Here’s an example:

When case = “xiaohong”

Then only slots named “xiaohong” will be displayed

If no case is matched and a defalut slot is available, the defalut slot is displayed

Of course, switch has more complex features, so let’s start with the core features and gradually complicate them (the idea of iteration).

Realize the principle of

First of all, we have to know the slots for this component

In VUE3, we can easily obtain Slots by simply doing the following

setup(props,{slots}){
  console.log(slots)
}
Copy the code

If you print slots, you’ll see that you get an object where the value of key is the name of the slot and value is a function that can be called to get the corresponding VNode.

So if I want to show the xiaohei slot what do I do?

That’s all it takes

  setup(props, { slots }) {
    
    return () = > {
      return slots.xiaohei()
    };
  },
Copy the code

In addition to returning an object as data to export to the template, setup can also directly return a function as render.

As long as the render function returns the vNode, it will be rendered to the view.

So the way the code is written above will eventually display the contents of the Xiaohei slot

So with that in mind, let’s go back to the first function

Is it as long as we render slots that matches the case

Look at the code:

export default {
  props: ["case"].setup(props, { slots }) {
    console.log(slots);
    return () = > {
      if (slots[props.case]) {
        returnslots[props.case](); }}; }};Copy the code

Note: make sure to add a conditional judgment, because it is possible that there is no corresponding slot

See, after understanding the principle is not very easy to achieve the first function.

When we look at the second function is not easy

Just add a piece of code:

export default {
  props: ["case"].setup(props, { slots }) {
    console.log(slots);
    return () = > {
      if (slots[props.case]) {
        return slots[props.case]();
      }

      if (slots["default"]) {
        return slots["default"] (); }}; }};Copy the code

If there is no match on the first condition, we will definitely get to the second condition, which is if (slots[“default”])

Return the default slot if there is one

At this point, you have implemented a simple Switch function component

conclusion

Let’s summarize what you’ve learned so far

  • When designing a component, first design the rules (interfaces) for that component
  • Tasking the idea of dividing big functions into small ones and then breaking them one by one
  • How slots is acquired in VUE3
  • Setup can not only return an object, but also a function, which has the same effect as render
  • The vNode returned by the render function will eventually be rendered to the view

If you learn this, then please use your little hands to point a “like” ~~~

The complete code

// VSwitch.vue
<script>
export default {
  props: ["case"].setup(props, { slots }) {
    return () = > {
      if (slots[props.case]) {
        return slots[props.case]();
      }

      if (slots["default"]) {
        return slots["default"] (); }}; }}; </script>Copy the code

Expand the thinking

In fact, the switch function implemented here is not complete. What if the user matches multiple conditions? There is no break, so should we show all the template matches?

Try it out yourself?