Vue.js 3.0 Tutorial
Vue.js 3.0 Component Advanced
Vue.js 3.0 Transitions & Animations
Vue.js 3.0 Reusable & Combinable
Vue.js 3.0 Advanced
Vue.js 3.0 Tools
Vue.js 3.0 Scale
Vue.js 3.0 Accessibility
Vue.js 3.0 Migrating from Vue2
Vue.js 3.0 Contribute Documentation
Vue.js 3.0 API References
Vue.js 3.0 Style Guide
In Vue, props are custom attributes that you can register on a component. When a value is passed to a prop attribute, it becomes a property on that component instance.
Here's a simple step-by-step guide on how to use props in Vue 3:
Step 1: Initialize your Vue project.
Create a new Vue 3 project using Vue CLI:
npm install -g @vue/cli vue create my-project
Choose Vue 3 when asked which version of Vue to use.
Step 2: Define a component with a prop.
In your src/components directory, create a new file called Greeting.vue:
<template>
<div>
{{ message }}
</div>
</template>
<script>
export default {
props: {
message: {
type: String,
required: true
}
}
}
</script>
Here, we've created a component that accepts a message prop. The prop is defined in the props option in our component, where we can specify its type and whether it's required.
Step 3: Pass the prop to the component.
Now, we can use our Greeting component in another component (for instance, App.vue) and pass it the message prop:
<template>
<div id="app">
<Greeting message="Hello Vue 3!" />
</div>
</template>
<script>
import Greeting from './components/Greeting.vue'
export default {
components: {
Greeting
}
}
</script>
Here, we're importing the Greeting component, registering it, and using it in our template. We're passing the message prop with a value of 'Hello Vue 3!'.
Step 4: Run your application.
You can run your Vue 3 application with the following command:
npm run serve
Now, if you load your application in a browser, you should see 'Hello Vue 3!' displayed, which is the prop value passed to the Greeting component.
Remember, props are used to pass data down from parent components to child components. They're a one-way data flow, meaning you should not mutate a prop inside a child component. Instead, if a child component needs to change a prop value, it should emit an event to inform its parent.
Passing Props in Vue 3.0:
Props are a way to pass data from a parent component to a child component in Vue 3.0.
They are defined in the parent component and received in the child component.
Example code:
<!-- ParentComponent.vue -->
<template>
<child-component :message="parentMessage"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
parentMessage: 'Hello from parent!',
};
},
};
</script>
<!-- ChildComponent.vue -->
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: ['message'],
};
</script>
Vue 3.0 Prop Types and Validation:
Vue 3.0 allows you to define prop types and perform validation using the props option.
This helps ensure that the received props meet specific criteria.
Example code:
<!-- ChildComponent.vue -->
<template>
<div>{{ validatedMessage }}</div>
</template>
<script>
export default {
props: {
message: {
type: String,
required: true,
validator: (value) => value.length > 0,
},
},
computed: {
validatedMessage() {
return this.message.toUpperCase();
},
},
};
</script>
Dynamic Props in Vue 3.0:
Props can be dynamic, allowing their values to change based on parent component data.
Dynamic props enable reactivity in the child component.
Example code:
<!-- ParentComponent.vue -->
<template>
<child-component :message="dynamicMessage"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
dynamicMessage: 'Hello from parent!',
};
},
methods: {
updateMessage() {
this.dynamicMessage = 'Updated message!';
},
},
};
</script>
Vue 3.0 Props Default Values:
Default values for props can be set using the default property in the props option.
This provides a fallback if the prop is not provided by the parent.
Example code:
<!-- ChildComponent.vue -->
<template>
<div>{{ defaultValuedMessage }}</div>
</template>
<script>
export default {
props: {
message: {
type: String,
default: 'Default Message',
},
},
computed: {
defaultValuedMessage() {
return this.message.toUpperCase();
},
},
};
</script>
Prop Binding in Vue 3.0:
Prop binding allows dynamic two-way communication between parent and child components.
Changes in the child component affect the parent component.
Example code:
<!-- ParentComponent.vue -->
<template>
<child-component v-bind:message.sync="parentMessage"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
parentMessage: 'Hello from parent!',
};
},
};
</script>
<!-- ChildComponent.vue -->
<template>
<input v-model="internalMessage" @input="$emit('update:message', internalMessage)">
</template>
<script>
export default {
props: ['message'],
data() {
return {
internalMessage: this.message,
};
},
watch: {
message(newValue) {
this.internalMessage = newValue;
},
},
};
</script>
Using Props in Vue 3.0 Templates:
Props are accessed in the child component's template using the mustache syntax.
They are automatically available for use in the template.
Example code:
<!-- ChildComponent.vue -->
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: ['message'],
};
</script>
Vue 3.0 Passing Objects as Props:
Objects can be passed as props, allowing for the transfer of complex data structures.
Objects maintain reactivity in the child component.
Example code:
<!-- ParentComponent.vue -->
<template>
<child-component :user="parentUser"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
parentUser: {
name: 'John Doe',
age: 25,
},
};
},
};
</script>
<!-- ChildComponent.vue -->
<template>
<div>{{ user.name }} - {{ user.age }}</div>
</template>
<script>
export default {
props: ['user'],
};
</script>
Prop Drilling in Vue 3.0:
Prop drilling occurs when props need to be passed through multiple layers of nested components.
While it works, it can become cumbersome in large applications.
Example code:
<!-- GrandparentComponent.vue -->
<template>
<parent-component :message="grandparentMessage"></parent-component>
</template>
<script>
import ParentComponent from './ParentComponent.vue';
export default {
components: {
ParentComponent,
},
data() {
return {
grandparentMessage: 'Hello from grandparent!',
};
},
};
</script>
<!-- ParentComponent.vue -->
<template>
<child-component :message="message"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
props: ['message'],
};
</script>
<!-- ChildComponent.vue -->
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: ['message'],
};
</script>
Vue 3.0 Props Events:
Custom events can be emitted from child components to communicate changes back to the parent.
This is useful for parent-child communication.
Example code:
<!-- ChildComponent.vue -->
<template>
<button @click="updateParent">Update Parent</button>
</template>
<script>
export default {
methods: {
updateParent() {
this.$emit('custom-event', 'Data to send to parent');
},
},
};
</script>
<!-- ParentComponent.vue -->
<template>
<child-component @custom-event="handleCustomEvent"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
methods: {
handleCustomEvent(data) {
console.log('Received data in parent:', data);
},
},
};
</script>
Vue 3.0 v-bind Shorthand for Props:
The v-bind directive can be used as a shorthand for passing props to child components.
This simplifies the syntax for binding props.
Example code:
<!-- ParentComponent.vue -->
<template>
<child-component v-bind:message="parentMessage"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
parentMessage: 'Hello from parent!',
};
},
};
</script>
Vue 3.0 Functional Components and Props:
Functional components receive props as the first argument, making them useful for stateless, presentational components.
They are more concise and have performance benefits.
Example code:
<!-- FunctionalChildComponent.vue -->
<template functional>
<div>{{ props.message }}</div>
</template>
<!-- ParentComponent.vue -->
<template>
<functional-child-component :message="parentMessage"></functional-child-component>
</template>
<script>
import FunctionalChildComponent from './FunctionalChildComponent.vue';
export default {
components: {
FunctionalChildComponent,
},
data() {
return {
parentMessage: 'Hello from parent!',
};
},
};
</script>
Vue 3.0 Props and Reactivity:
Changes to props in the parent component are automatically reflected in the child component.
Props maintain reactivity in the child component.
Example code:
<!-- ParentComponent.vue -->
<template>
<child-component :message="parentMessage"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
parentMessage: 'Hello from parent!',
};
},
methods: {
updateMessage() {
this.parentMessage = 'Updated message!';
},
},
};
</script>
<!-- ChildComponent.vue -->
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: ['message'],
};
</script>
Scoped Slots and Props in Vue 3.0:
Scoped slots allow passing data from a parent component to a child component using slots.
Props can be used within the scoped slot content.
Example code:
<!-- ParentComponent.vue -->
<template>
<child-component>
<template #default="props">
{{ props.message }}
</template>
</child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
parentMessage: 'Hello from parent!',
};
},
};
</script>
<!-- ChildComponent.vue -->
<template>
<div>
<slot :message="parentMessage"></slot>
</div>
</template>
This should give you a comprehensive understanding of various aspects of passing props in Vue 3.0.