javascript - VueJS,将数据从组件传递到另一个
问题描述
我为我做了一些新的东西,我有问题..所以让我们解释一下..
我有名称的组件components/HomeComponent.vue
这是:
主页组件.vue
<script>
export default {
name: "HomeComponent",
data() {
posts: [
{ title: "Hello", body: "Some text" },
{ title: "Hello", body: "Some text" },
{ title: "Hello", body: "Some text" },
{ title: "Hello", body: "Some text" }
];
}
};
</script>
我有我的“观点”views/Home.vue
主页.vue
<template>
<!-- Blog Entries Column -->
<div class="col-md-8">
<h1 class="my-4">Статии</h1>
<!-- Blog Post -->
<div class="card mb-4" v-for="post in posts">
<div class="card-body">
<h2 class="card-title">{{ post.title }}</h2>
<p class="card-text">{{ post.body }}</p>
<a href="#" class="btn btn-primary">Read More →</a>
</div>
<div class="card-footer text-muted">
Posted on January 1, 2017 by
<a href="#">xxx</a>
</div>
</div>
</div>
</template>
所以我想访问我的帖子Home.vue
并制作for循环..怎么做?谢谢指教!:)
<script>
// @ is an alias to /src
import HomeComponent from "@/components/HomeComponent.vue";
export default {
name: "home",
components: {
HomeComponent
},
};
</script>
解决方案
您必须将数据作为道具传递给 Home 组件。更多信息可以在这里找到。但这里有一个快速解决您的问题的方法。
比较
<template>
<!-- Blog Entries Column -->
<div class="col-md-8">
<h1 class="my-4">Статии</h1>
<!-- Blog Post -->
<div class="card mb-4" v-for="post in posts">
<div class="card-body">
<h2 class="card-title">{{ post.title }}</h2>
<p class="card-text">{{ post.body }}</p>
<a href="#" class="btn btn-primary">Read More →</a>
</div>
<div class="card-footer text-muted">
Posted on January 1, 2017 by
<a href="#">xxx</a>
</div>
</div>
</div>
</template>
<script>
export default {
props:['posts']
}
</script>
主页.vue
<template>
<comp :posts="posts"></comp>
</template>
<script>
import Comp from './components/Comp.vue'
export default {
name: "HomeComponent",
components: {
'comp': Comp
},
data() {
posts: [
{ title: "Hello", body: "Some text" },
{ title: "Hello", body: "Some text" },
{ title: "Hello", body: "Some text" },
{ title: "Hello", body: "Some text" }
];
}
};
</script>
推荐阅读
- java - 试图克隆 ArrayList 但我收到警告
- ios - 表格视图单元格滚动问题
- python-rq - 仅当过滤器适用时才入队依赖
- qt - 在 QML 中使用 PlaceSearchModel 显示完整地址
- java - 按值同步,而不是按对象同步
- android - 如何在恢复/快速启动时重新启用禁用的 android 包?
- php - 如何使用 Symfony 和 Guzzle 通过 api 更新 woocommerce 产品
- sympy - python sympy lambdify 在函数内部不起作用
- javascript - 如何将 console.log 绑定到另一个函数调用,以便我可以在调用它的控制台中看到脚本的行号?
- javascript - 丢失变量javascript的值