Dynamic Components

Scrum Session

• what have you been working on?
• what do you plan to be doing?
• do you have any blocks?

Activity

• Find ui elements that are repeated on a web page with different content (ie: a button, card, accordion layout, header…)
• mood board as a team and sketch out the props and classes that change on implementation
• use sticky notes to document specifically the fields that require information
• TIP: any e-commerce store will have a lot of examples to draw from

Components

• Components separate our code just like modules, but a single file vue component bundles in the needed logic, content, and style into 1 file
• A static component doesnt’ need any props or anything. however usually a component will take props to get more mileage out of the component

Props

• Use props to pass information from parent components to child components
• props are one way binding for 2 way binding, use v-model
• Documentation

A little on defining props

• if you are going to edit the prop data in the script, write this:

const props = defineProps({
	// props go here
})

• if you are not going to edit the props with javascript, you can do this:

defineProps({
	// props go here
})

Activity: Make a Link Primary Action Component

• Create an AppButton.vue Component (or AppLink)
• Give it a text and href prop
• Use it in a page header section (with a primary and secondary action)
  • ie: Learn More | Shop Now

Activity 2: Add style props

• Class and style bindings
• Extend your button’s design by giving it the ability to change color
• Pick a convention:
  • primary and secondary props are predetermined with set colors
  • can take a developer defined color and add it to styles
  • pass a tailwind color into it
  • default as secondary, use a primary flag to turn on primary colors
• code tips:
  • use ternary operators, class bindings, and boolean logic