Component

Interfaces

Justin Bennett

Front End Architect

@zephraph

{\displaystyle \overbrace {\overbrace {{\mathtt {\color {BrickRed}<\!p\ }}\color {Magenta}\underbrace {\mathtt {class}} _{\mathsf {\color {Black}{Attribute \atop name}}}{\mathtt {=''}}\!\underbrace {\mathtt {foo}} _{\mathsf {\color {White}{Attr} \atop \color {Black}value}}''{\mathtt {\color {BrickRed}>}}} ^{\mathsf {Start\ tag}}\overbrace {\mathtt {\color {Green}This\ is\ a\ paragraph.}} ^{\mathsf {Content}}\overbrace {\mathtt {\color {BrickRed}<\!/p\!>}} ^{\mathsf {End \atop tag}}} ^{\mathsf {Element}}}
https://en.wikipedia.org/wiki/HTML_element#syntax
<button>Click Me</button>

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

https://reactjs.org/docs/components-and-props.html
<button class="default">{{ text }}</button>
<template>

</template>

Button

"Click Me"

<BaseButton text="Click Me"/>

prop

BaseButton Example

Prop Validation

BaseButton Example

How do we listen for clicks?

<button @click="sayHi"/>Click Me</button>

Basic Button Click Event Example

Basic Button Click Event Example

https://vuejs.org/v2/guide/components.html#Composing-Components

<BaseButton/>Click Me</BaseButton>

What about...

SLOTS

Slots Enable Compositional UI

<template>
  <BaseButton>
    <Star/> Star
  </BaseButton>
</template>
<BaseButton>
</BaseButton>

Named Slots

Left Section

Right Section

References

https://codesandbox.io/s/428177wp5x
https://vuejs.org/v2/guide/components.html#Props

https://vuejs.org/v2/guide/components.html#Custom-Events

https://vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots

Vue Component Interfaces

By Justin Bennett

Vue Component Interfaces

Props, events, and slots are the mechanisms that vue provides to allow components to interact with one another. This talk aims to introduce each concept, explore some of their deeper complexities, and hopefully provide greater insight into how to write reusable components.

  • 220
Loading comments...

More from Justin Bennett