vue.js將數據從父單個文件組件傳遞給子

Question

使用單文件架構我試圖將數據（一個對象）從父組件傳遞給子組件：

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>

似乎是一項微不足道的任務，可能解決方案非常簡單。 謝謝你的建議:)

Answer 1

你快到了。

為了將app_content變量發送到子組件，您必須將其作為模板中的屬性傳遞，如下所示：

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

現在，為了在appHeader.vue中獲取:app-component屬性，你必須將你的prop從app_component重命名為appComponent （這是Vue傳遞屬性的慣例）。 最后，要在子模板中打印它，只需更改為： {{ appContent }}