- 首页
- 前端开发
- 如何在 VueJS 中将值从一个子组件传递到另一个子组件?
如何在 VueJS 中将值从一个子组件传递到另一个子组件?
[英] How to pass value from one child component to another in VueJS?
本文介绍了如何在 VueJS 中将值从一个子组件传递到另一个子组件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
完整源代码:
组件 Menu.vue 有 2 个子组件:
<div><!-- 两列--><div class="flex mb-4"><div class="w-1/2 bg-gray-400"><ItemsList/>
<div class="w-1/2 bg-gray-500"><ItemImage></ItemImage>
模板><脚本>从./ItemsList"导入ItemsList;从 "./ItemImage" 导入 ItemImage;导出默认{成分: {物品清单,物品图片}};
ItemsList.vue:
<div><div v-for="菜单项中的项目" :key="item.name"><ulclass="flex justify- between bg-gray-200":class="item.highlight ? 'highlight' : ''"><p class="px-4 py-2 m-2">{{ 项目名称 }}</p><p class="px-4 py-2 m-2">{{ item.price }}</p>
模板><脚本>导出默认{数据() {返回 {菜单项:[{名称:苹果",价格:20,image_url: "../assets/images/apple.jpg"},{名称:橙色",价格:21,image_url: "../assets/images/orange.jpg"},{名称:香蕉",价格:22,image_url: "../assets/images/banana.jpg"},{名称: "葡萄",价格:23,image_url: "../assets/images/grape.jpg"}]};},创建(){var self = this;self.menuItems.map((x, i) => {self.$set(self.menuItems[i], "highlight", false);});无功初始化= 0;设置间隔(函数(){if (init === self.menuItems.length) {初始化 = 0;}self.menuItems[init].highlight = true;如果(初始化 === 0){self.menuItems[self.menuItems.length - 1].highlight = false;} 别的 {self.menuItems[init - 1].highlight = false;}初始化++;}, 2000);}};<样式范围>.强调 {背景颜色:灰色;}</风格>
ItemImage.vue - 几乎是空的
<div><p>来自 ItemImage 组件的你好</p></div>模板><脚本>导出默认{道具:[image_url"]};
ItemsList 遍历每个项目并突出显示它.我需要组件 ItemImage 来显示该 活动/突出显示 项目的图像.图像的 URL 是 item.image_url
.
解决方案
在 ItemsList 组件中使用 image_url 发出事件,在 Menu 组件中将 image_url 作为 prop 传递给 ItemImage 组件.我在下面的代码和框中做了这个检查.
https://codesandbox.io/s/wild-moon-mbto4
Full source code: https://github.com/tenzan/menu-ui-tw
Demo: https://flamboyant-euclid-6fcb57.netlify.com/
Goal:
ItemsList
and ItemImage
are child components to Menu.vue
. I need to pass the image_url
from ItemsList
to ItemImage
, in order to change the image on right, after item on left is changed automatically on time intervals.
- Left side: component
ItemsList.vue
- Right side: component
ItemImage.vue
Component Menu.vue has 2 child components:
<template>
<div>
<!-- Two columns -->
<div class="flex mb-4">
<div class="w-1/2 bg-gray-400">
<ItemsList />
</div>
<div class="w-1/2 bg-gray-500">
<ItemImage></ItemImage>
</div>
</div>
</div>
</template>
<script>
import ItemsList from "./ItemsList";
import ItemImage from "./ItemImage";
export default {
components: {
ItemsList,
ItemImage
}
};
</script>
ItemsList.vue:
<template>
<div>
<div v-for="item in menuItems" :key="item.name">
<ul
class="flex justify-between bg-gray-200"
:class="item.highlight ? 'highlight' : ''"
>
<p class="px-4 py-2 m-2">
{{ item.name }}
</p>
<p class="px-4 py-2 m-2">
{{ item.price }}
</p>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
menuItems: [
{
name: "Apple",
price: 20,
image_url: "../assets/images/apple.jpg"
},
{
name: "Orange",
price: 21,
image_url: "../assets/images/orange.jpg"
},
{
name: "Banana",
price: 22,
image_url: "../assets/images/banana.jpg"
},
{
name: "Grape",
price: 23,
image_url: "../assets/images/grape.jpg"
}
]
};
},
created() {
var self = this;
self.menuItems.map((x, i) => {
self.$set(self.menuItems[i], "highlight", false);
});
var init = 0;
setInterval(function() {
if (init === self.menuItems.length) {
init = 0;
}
self.menuItems[init].highlight = true;
if (init === 0) {
self.menuItems[self.menuItems.length - 1].highlight = false;
} else {
self.menuItems[init - 1].highlight = false;
}
init++;
}, 2000);
}
};
</script>
<style scoped>
.highlight {
background-color: gray;
}
</style>
ItemImage.vue - almost empty
<template>
<div><p>Hello from ItemImage component</p></div>
</template>
<script>
export default {
props: ["image_url"]
};
</script>
ItemsList iterates through each item and highlights it.
I will need component ItemImage to show an image for that active/highlighted item.
URL for an image is item.image_url
.
解决方案
Emit an event in ItemsList component with image_url and in Menu component pass image_url to ItemImage component as a prop. I did this in below codesandbox check it out.
https://codesandbox.io/s/wild-moon-mbto4
这篇关于如何在 VueJS 中将值从一个子组件传递到另一个子组件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文