Vue.js passing data from parent single file component to child

Question

Using a single file architecture, I am trying to transfer data (object) from a parent component to a child component:

App.vue

<template> <div id="app"> <app-header app-content={{app_content}}></app-header> </div> </template> <script> import appHeader from './components/appHeader' import {content} from './content/content.js' export default { components: { appHeader }, data: () => { return { app_content: content } } } </script> 

appHeader.vue

 <template> <header id="header"> <h1>{{ app_content }}</h1> </header> </template> <script> export default { data: () => { return { // nothing } }, props: ['app_content'], created: () => { console.log(app_content) // undefined } } </script> 

This seems to be such a trivial task, and probably the solution is quite simple. Thanks for any advice :)

Answer 1

You are almost there.

To send the app_content variable from App.vue to a child component, you must pass it as an attribute in the template, for example:

 <app-header :app-content="app_content"></app-header> 

Now, to get the :app-component property inside appHeader.vue, you will need to rename your prop from app_component to appComponent (this is Vue's convention for passing properties). Finally, to print it inside the child template, just change to: {{ appContent }}