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


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.