[英]vue.js passing data from parent single file component to child
Using single file architecture I'm trying to pass data (an object) from a parent component to a child: 使用单文件架构我试图将数据(一个对象)从父组件传递给子组件:
App.vue 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 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>
Seems to be such a trivial task and probably the solution is quite simple. 似乎是一项微不足道的任务,可能解决方案非常简单。 Thanks for any advice :)
谢谢你的建议:)
You're almost there. 你快到了。
In order to send the app_content
variable from App.vue to the child component you have to pass it as an attribute in the template like so: 为了将
app_content
变量发送到子组件,您必须将其作为模板中的属性传递,如下所示:
<app-header :app-content="app_content"></app-header>
Now, in order to get the :app-component
property inside appHeader.vue you will have to rename your prop from app_component
to appComponent
(this is Vue's convention of passing properties). 现在,为了在appHeader.vue中获取
:app-component
属性,你必须将你的prop从app_component
重命名为appComponent
(这是Vue传递属性的惯例)。 Finally, to print it inside child's template just change to: {{ appContent }}
最后,要在子模板中打印它,只需更改为:
{{ appContent }}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.