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}}