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

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

现在，为了获得appHeader.vue中的:app-component属性，您必须将道具从app_component重命名为appComponent（这是Vue的传球惯例属性）。最后，要在儿童模板中打印，只需更改为：{{ appContent }}

vue.js将数据从父单个文件组件传递给子

1 个答案: