❝

Even when the road is endless

I still have the light

❞

preface

Container, how big is it? Is it full?

Big big!!

How big is it?

Well, that depends on how big your screen is

Are you ready? Ready to power on, ACTION!

1 Container

Component slot

Oh, my gosh!

What are you thinking? Somebody else is a slot

Does the bully know? I guess Super Mario knows

See? That’s the slot, the slot for the card

Is not god!!!!!!!!!

Code snippet

<section 

  class="el-container" 

  :class="{ 'is-vertical': isVertical }">

  <slot></slot>

</section>

Copy the code

<el-container>

  <el-header>Header</el-header>

  <el-main>Main</el-main>

  <el-footer>Footer</el-footer>

</el-container>





computed: {

  isVertical() {

.

    return this.$slots && this.$slots.default

          ? this.$slots.default.some(vnode => {

            const tag = vnode.componentOptions && vnode.componentOptions.tag;

            return tag === 'el-header' || tag === 'el-footer';

          })

          : false;

.

  }

}

Copy the code

Skills parsing

❝

<slot></slot>

It’s the slot on the playstation

After having slot, still have to have card, ability game ah<el-header>... <el-footer>

It’s the game card

As for that being Super Mario, guess whatTo review, there are three components:

“Property + method + event“

Of course, don’t forget our slot cutie yo!

❞

❝

Component communication, remember

The pushy grandson, and the old urchin grandfather

Now it’s our cutie’s turn. Give it up!

<el-header>I was passed into a slot

this.$slotsI’m the shelf for the slot

There’s no name. Give it a default

this.$slots.default

What the hell is a slot? Open it and see

vnode??? What the hell

Vnode.com ponentOptions a bit familiar

Parent.$options Ring a bell?

Oh, this is it, ha ha ha

❞

Ahead of the return

What, you’re gonna cut in line? That won’t work!!

I don’t suppose you’re here to poach

Code snippet

computed: {

  isVertical() {

.

    if (this.direction === 'vertical') {

      return true;

    } else if (this.direction === 'horizontal') {

      return false;

    }

    return this.$slots && this.$slots.default

.

}

Copy the code

Skills parsing

❝

This. Direction component element, attribute has passed the value, directly take away, do not give others the opportunity to not pass the value, show mercy, fat water does not flow out of the field

❞

2 Header

Object to simplify

Honey, AM I hungry? What to eat? I wonder how about a barbecue? Go!

---

Honey, AM I hungry? Eat barbecue and go!

---

The husband,

Go!

“It’s as simple as that. It’s as direct as that“

Code snippet

<header class="el-header" :style="{ height }">

  <slot></slot>

</header>

Copy the code

Skills parsing

❝

style=”height: 60px”

:style=”{height: height}”

:style=”{height}”

Tacit understanding is so drag, there is no

❞

3 Aside

Code snippet

<aside class="el-aside" :style="{ width }">

  <slot></slot>

</aside>

Copy the code

Skills parsing

❝

What do I have to say, up there, if I don’t shoot you

❞

4 Main

Code snippet

<main class="el-main">

  <slot></slot>

</main>

Copy the code

Skills parsing

❝

It’s scary, it’s bloody and I want to be quiet

❞

5 Footer

Code snippet

<footer class="el-footer" :style="{ height }">

  <slot></slot>

</footer>

Copy the code

Skills parsing

❝

What’s with the big night fight and the fun

❞

“Is this a distortion of human nature?“

“Or moral decay!“

❝

I am a fish with seven seconds of memory

Take you on an amazing journey

❞

Refer to the link

• The element’s official website
• Element repository
• Vue website
• ES6 Tutorial
• Container Layout Design and implementation of Container components