vue3 父向子组件、子向父组件和兄弟组件之间通信的购物车案例

最新推荐文章于 2024-02-22 10:01:20 发布

HardworkLiao

最新推荐文章于 2024-02-22 10:01:20 发布

阅读量341

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_52411807/article/details/125849656

版权

本文通过一个购物车案例，详细介绍了在Vue3中如何实现父组件向子组件、子组件向父组件以及兄弟组件之间的通信。涉及到的关键工具有VsCode、axios、Vite、bootstrap、mitt和less。项目创建过程包括安装所需依赖，如less、bootstrap、axios和mitt，并提供了项目源码，包括index.html、main.js、App.vue等文件，以及一个完整的项目地址供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、需要的工具

VsCode
axios
Vite
bootstrap
mitt
less

二、项目目录

在这里插入图片描述

三、使用步骤

在终端定位到需要创建项目的目录输入npm init vite-app demo-cart
npm install less -D安装less
导入bootstrap
npm install axios安装axios
npm install mitt安装mitt

四、项目源码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

main.js

import {
    createApp } from 'vue'
import App from './App.vue'
// 引入bootstrap
import './assets/css/bootstrap.min.css'
import './index.css'
//引入axios
import axios from 'axios'
// 导入封装的函数
import getTotall from './utils/compute.js'
axios.defaults.baseURL = 'https://applet-base-api-t.itheima.net/'
const app = createApp(App)
// 声明axios为全局属性
app.config.globalProperties.$http = axios
app.config.globalProperties.$getTotall = getTotall
app.mount('#app')

- index.css

```css
:root{
   
 font-size: 14px;
}
/*复选框的样式 */
.custom-checkbox .custom-control-label::before {
   
  border-radius: 10px;
}

App.vue

<template>
  <div class="app-container">
    <Header title="我的购物车案例"></Header>
    <Goods :goodsList="goodsList" @getNewCount="getNewCount"></Goods>
    <Footer :goodsList="goodsList" @getFullSelect="fullSelect"></Footer>
  </div>
</template>

<script>
import Header from './components/EsHeader/Header.vue'
import Footer from './components/EsFooter/Footer.vue'
import Goods from './components/EsGoods/Goods.vue'

export default {
     
  name: 'App',
  data() {
     
    return {
      goodsList: [] }
  },
  created() {
     
    //  在创建阶段调用getGoodsList方法获取后台数据
    this.getGoodsList()
  },
  methods: {
     
    async getGoodsList() {
     
      // 使用全局挂载的属性$http发送ajax请求
      // 解构出data并赋值给res
      const {
      data: res } = await this.$http.get('api/cart')
      // 判断请求是否成功,并赋值给goodList
      if (res.status == 200) {
     
        console.log(res.message)
        this.goodsList = res.list
        // 初始化商品总价和商品总数
        this.$getTotall(

最低0.47元/天解锁文章