Module 8 - Component communication

Question 1

How do you pass information from the parent (app) to the child (component) in Vue

Answer 1

You can pass data to reusable components by adding a section in the component called props where you specify the attributes that the component can receive using strings. Those strings can be used in the template and in other sections using the this.key word. The “props” are transferred from the app to the component using a syntax similar to html attributes on the vue element

Question 2

What is a uni directional data flow

Answer 2

It is the term used to describe the fact that the attributes that are passed from the parent to the component should not be mutated by the component but only be transferred in a uni directional way from the parent to the component when we are using props. To change data that belong to the parent you should emit an event from the child to the parent and the parent should change the data that belongs to him

Question 3

What do we need to do in order to bind our props to dynamic values

Answer 3

In order to bind our props to dynamic values we need to use v-bind:propName=”value”

Question 4

how do you use a component with a v-for or a v-if

Answer 4

Our components are the same as html elements and therefor you can use v-for on them the same way you use them on elements and you must have a key value defined.

Question 5

What is $emit for?

Answer 5

$emit() is a function that fires an event to allow a component to notify it’s parent that a value has changed

Question 6

How should the event name that is emitted from the component be formatted

Answer 6

The events from the components should always be kebab-case formatted

Question 7

How do you pass data from the event that is emitted from the component to the parent?

Answer 7

In order to emit additional data you need to add parameters to the $emit method and they will be considered as arguments in the method on the parent

Question 8

How do we listen to the event that is emitted from the child component in the parent component?

Answer 8

We listen to the event emitted by the child component by adding an event handler v-on (or @) for the event name that was emitted by the child component and call a method that does the needed manipulation on the data that was bound and sent to the child component where it is updated in the UI. This completes the entire cycle from sending props from the parent to the child and emitting event from the child to the parent.

Question 9

How do you document and let other developers know what are the events that the component emits?

Answer 9

You document the events that your component emits by adding a section called emits to the configuration area of the component with an array of strings with the names of the events that the component can fire. If you want to add other parameters to the documentation you can use an object instead of the array.

Question 10

How would you document the events and params that are emitted by the component?

Answer 10

You can extend the emits section from an array with just the names of the events that are emitted to an object where each event is a key and the value is a function with each argument representing data that is included in the emitted event. you can also validate that data at that point inside the function and return true/false based on the validity of the arguments of the function.

Question 11

What is included in main.js?

Answer 11

main. js contains:
1. import of createApp from vue
2. importing the components
3. creating the app and setting it in a const
4. adding the components to app app.component(…,…);
5. mounting the app

Question 12

How do you put dummy text inside an input field?

Answer 12

You can use the placeholder attribute with the text you want displayed in the input. This is not the value of the input field

Question 13

What is a reusable component?

Answer 13

A reusable component (or dynamic component) is a component that can receive data from its ancestor (or an external source) and therefor display different data each time it is reused in the application.

Question 14

What are props?

Answer 14

props is short for properties and we can think about them as attributes that are placed in an html element. Those can be required or optional and are specified and can be configured in the component using a props section in the configuration. props can be primitive types, objects, arrays, functions, promises etc.

Question 15

How to validate props?

Answer 15

Instead of just writing the names of the props passed inside an array with strings we can replace it with an object where each prop name is a key and the value is the type of it. If you want to be even more specific the value can itself be an object and we can specify the type, required , default, validation properties on that object for the prop.

Question 16

How do you set a default value to an object in props?

Answer 16

the default key in the validation object of the prop should use a factory function to return the default object.

Question 17

How do you specify multiple possible types for a prop?

Answer 17

if a prop can have more than one type you can set the type field of the prop definition object with an array of the types instead of a single value.

Question 18

How do you validate a prop?

Answer 18

In order to validate a prop you need to add a validation key in the prop definition object and the value of it should be a function that returns truthy/falsy value.
When prop validation fails, Vue will produce a console warning (if using the development build).

Question 19

What does provide do?

Answer 19

provide is an object in the config object of the vue element. It states which data can be accessed by components that are its descendants using inject.

In case we want the provided data to be connected to the data in the config of the element we should use a method that returns an object instead of an object where each key is the name of the data that we are providing (like data works). We then should not duplicate the data but assign the provided data for example this.myData to the provided property

Question 20

What is inject?

Answer 20

Inject is an array where you provide in string format all the data that is going to be provided to this component by its ancestor. inject is defined in the config of the component which works in tandem with provide.

A descendant element can inject data that is provided (in the provide object in its config) by the ancestor. works similarly to props that are provided by a direct parent.

Question 21

How does provide-inject work with custom events.

Answer 21

An ancestor can provide a method that it wants a descendant to call in its provide method in the config object and a descendant can inject that method in its inject array and call it so it will be executed on the ancestor