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.vue 发送到子组件，您必须将其作为模板中的属性传递，如下所示：

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

现在，为了在 appHeader.vue 中获取 :app-component 属性，您必须将 prop 从 app_component 重命名为 appComponent（这是 Vue 传递属性的约定）。 最后，要在孩子的模板中打印它，只需更改为：{{ appContent }}