请使用vue2写一个父组件调用子组件中的方法不需要显示子组件内容
时间: 2023-11-03 13:20:55 浏览: 32
好的,以下是一个简单的外卖首页的代码,使用Vue2框架编写:
```
<template>
<div class="home">
<div class="header">
<img src="./assets/logo.png" alt="logo">
<h1>外卖首页</h1>
</div>
<div class="banner">
<img src="./assets/banner.png" alt="banner">
</div>
<div class="categories">
<div class="category" v-for="category in categories" :key="category.id">
<img :src="category.image" :alt="category.name">
<span>{{ category.name }}</span>
</div>
</div>
<div class="featured">
<h2>推荐菜品</h2>
<div class="dish" v-for="dish in featuredDishes" :key="dish.id">
<img :src="dish.image" :alt="dish.name">
<h3>{{ dish.name }}</h3>
<p>{{ dish.description }}</p>
<span>{{ dish.price }}</span>
<button @click="addToCart(dish)">加入购物车</button>
</div>
</div>
<div class="cart">
<h2>购物车</h2>
<ul>
<li v-for="item in cartItems" :key="item.id">
<span>{{ item.name }}</span>
<span>{{ item.price }}</span>
<button @click="removeFromCart(item)">移除</button>
</li>
</ul>
<div v-if="cartItems.length > 0">
<button @click="placeOrder">下单</button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
categories: [
{ id: 1, name: "热销", image: "./assets/category1.png" },
{ id: 2, name: "折扣", image: "./assets/category2.png" },
{ id: 3, name: "特色", image: "./assets/category3.png" },
{ id: 4, name: "川菜", image: "./assets/category4.png" },
{ id: 5, name: "湘菜", image: "./assets/category5.png" },
{ id: 6, name: "粤菜", image: "./assets/category6.png" },
],
featuredDishes: [
{
id: 1,
name: "红烧肉",
image: "./assets/dish1.png",
description: "色香味俱全的传统美食",
price: 28,
},
{
id: 2,
name: "宫保鸡丁",
image: "./assets/dish2.png",
description: "麻辣鲜香,口感极佳",
price: 22,
},
{
id: 3,
name: "清蒸鲈鱼",
image: "./assets/dish3.png",
description: "肉质鲜嫩,营养丰富",
price: 38,
},
],
cartItems: [],
};
},
methods: {
addToCart(dish) {
let found = false;
for (let item of this.cartItems) {
if (item.id === dish.id) {
item.quantity++;
found = true;
break;
}
}
if (!found) {
this.cartItems.push({
id: dish.id,
name: dish.name,
price: dish.price,
quantity: 1,
});
}
},
removeFromCart(item) {
let index = this.cartItems.indexOf(item);
this.cartItems.splice(index, 1);
},
placeOrder() {
// 发送下单请求
alert("下单成功!");
this.cartItems = [];
},
},
};
</script>
<style>
/* 样式省略 */
</style>
```
以上代码仅作为参考,实际应用中还需要根据需求进行相应的修改和完善。