Vue.js Send Data To The Child Component
Static Data
STEP 01: In the parent component, add a custom attribute when registering a child component.
<ChildComponent title="Raja Tamil"/>
STEP 02: Passing the title attribute to the props array as a single item will turn it to a property that can be used inside the child component instance.
export default {
props: ['title']
};
Child component
{{title}}
Dynamic Data
STEP 01: In the parent component, create a variable called name
inside the data()
model.
data() {
return {
name : "Raja Tamil"
}
},
STEP 02: Bind the name property with a value myName to the child component when rendering it on the parent template.
<ChildComponent :name="myName"/>
The value of the name property is passed to myName and you can access it inside the child component.
STEP 03: To get access to myName property, you will first need to register inside a props array like this:
export default {
props: ['myName']
};
And you can access this property inside the child template.
{{myName}}