Props
In HTML, we use kebab case for props
In vue, we use camel case for props
We can explain the type of props in script
We can put more explanation like below:
Supported Prop Values
In general, you can learn all about prop validation in the official docs: https://v3.vuejs.org/guide/component-props.html
Specifically, the following value types (type property) are supported:
String
Number
Boolean
Array
Object
Date
Function
Symbol
But type can also be any constructor function (built-in ones like Date or custom ones).
This is convention -> we should use kebab case for function
In Vue.js, $emit is a method provided by the Vue instance that allows child components to communicate with their parent components. It is used to trigger custom events that the parent component can listen to and respond to.
$emit
Here's how $emit works:
In the child component, you can use $emit to trigger an event along with an optional payload. For example:
this.$emit('eventName', payload);Here, 'eventName' is the name of the event you want to emit, and payload is an optional data object that you can pass to the parent component.
In the parent component, you can listen to the emitted event using the v-on directive (or its shorthand @). For example:
<child-component @eventName="handleEvent"></child-component>Here, handleEvent is the name of the method in the parent component that will be executed when the 'eventName' event is emitted by the child component.
In the parent component's methods, define the handleEvent method to handle the emitted event. For example:
methods: {
handleEvent(payload) {
// Handle the emitted event
console.log('Received event:', payload);
}
}In this method, you can access the payload passed from the child component and perform any necessary actions or update the parent component's data based on the emitted event.
By using $emit, child components can notify their parent components about specific actions or changes, enabling a way to pass data and trigger functionality between components in a Vue.js application.
Prop / Event Fallthrough & Binding All Props
There are two advanced concepts you also should have heard about:
- Prop Fallthrough
- Binding All Props on a Component
Prop Fallthrough
You can set props (and listen to events) on a component which you haven't registered inside of that component.
For example:
BaseButton.vue
<template>
<button>
<slot></slot>
</button>
</template>
<script>export default {}</script>This button component (which might exist to set up a button with some default styling) has no special props that would be registered.
Yet, you can use it like this:
- <base-button type="submit" @click="doSomething">Click me</base-button>
Neither the type prop nor a custom click event are defined or used in the BaseButton component.
Yet, this code would work.
Because Vue has built-in support for prop (and event) "fallthrough".
Props and events added on a custom component tag automatically fall through to the root component in the template of that component. In the above example, type and @click get added to the <button> in the BaseButton component.
You can get access to these fallthrough props on a built-in $attrs property (e.g. this.$attrs).
This can be handy to build "utility" or pure presentational components where you don't want to define all props and events individually.
You'll see this in action the component course project ("Learning Resources App") later.
You can learn more about this behavior here: https://v3.vuejs.org/guide/component-attrs.html
Binding all Props
There is another built-in feature/ behavior related to props.
If you have this component:
UserData.vue
<template>
<h2>{{ firstname }} {{ lastname }}</h2>
</template>
<script>
export default {
props: ['firstname', 'lastname']
}
</script>You could use it like this:
<template>
<user-data :firstname="person.firstname" :lastname="person.lastname"></user-data>
</template>
<script>
export default {
data() {
return {
person: { firstname: 'Max', lastname: 'Schwarz' }
};
}
}
</script>But if you have an object which holds the props you want to set as properties, you can also shorten the code a bit:
<template>
<user-data v-bind="person"></user-data>
</template>
<script>
export default {
data() {
return {
person: { firstname: 'Max', lastname: 'Schwarz' }
};
}
}
</script>With v-bind="person" you pass all key-value pairs inside of person as props to the component. That of course requires person to be a JavaScript object.
This is purely optional but it's a little convenience feature that could be helpful.
we are registering out two components to use
in App.vue, we can use those two components since we registered
Provide and Inject in Vue
In Vue.js, "provide" and "inject" are features that facilitate component communication and data sharing between parent and child components, even when they are not directly linked by a parent-child relationship in the component hierarchy.
Provide: The "provide" option is used in a parent component to define the data or methods that it wants to share with its child components. It is typically set up as a function that returns an object containing the data or methods to be provided. By using the "provide" option, the parent component makes the provided data accessible to all of its child components.
Inject: The "inject" option is used in child components to specify which provided data they want to access. It allows child components to access the provided data without the need for explicit props passing. By using the "inject" option, the child component can declare a property or an array of properties, specifying the names of the provided data it needs access to.
Here's an example of how "provide" and "inject" can be used:
// Parent component
const ParentComponent = {
provide() {
return {
sharedData: 'This data is shared with child components',
sharedMethod: () => {
// Shared method logic
},
};
},
// ...
};
// Child component
const ChildComponent = {
inject: ['sharedData', 'sharedMethod'],
// ...
mounted() {
console.log(this.sharedData); // Access the shared data
this.sharedMethod(); // Call the shared method
},
};In this example, the "ParentComponent" provides the "sharedData" and "sharedMethod" to its child components. The "ChildComponent" injects and accesses the provided data using the "sharedData" and "sharedMethod" property names. This enables effective communication and data sharing between the parent and child components.
By using "provide" and "inject," components can share data and methods without relying on complex prop chains, making it easier to manage and maintain the component structure in Vue.js applications.
