VueNYC - Component Interfaces - Justin Bennett (@zephraph)

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. CONTENTS 0:06 - Intro 1:15- Let’s talk about HTML 3:29 - Components 4:23 - Building button primitive 5:17 - Props 6:13 - BaseButton Example 8:47 - Prop Validation 11:01 - How do we listen for clicks? 12:16 - Basic Button Click Event Example 17:05 - Composing Components 19:30 - What about passing data as a content 21:00 - Slots Enable Compositional UI 22:41 - Named Slots 23:18 - When to use slots RESOURCES Slides http://slides.com/zephraph/vue-component-interfaces#/ Code https://codesandbox.io/s/428177wp5x HTML Element Syntax https://en.wikipedia.org/wiki/HTML_element#Syntax React Components and Props https://reactjs.org/docs/components-and-props.html Vue Props https://vuejs.org/v2/guide/components.html#Props Vue Custom Events https://vuejs.org/v2/guide/components.html#Custom-Events Composing Components https://vuejs.org/v2/guide/components.html#Composing-Components Content Distribution with Slots https://vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots