vue 生命周期、数据共享

最新推荐文章于 2023-08-09 10:07:46 发布
最新推荐文章于 2023-08-09 10:07:46 发布
阅读量752 收藏 2
点赞数
分类专栏： vue学习及经验 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sjp991012/article/details/127277988
版权

文章目录

一、组件的生命周期

1、生命周期 & 生命周期函数

  • 生命周期（Life Cycle）是指一个组件从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。
  • 生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。

注意：生命周期强调的是时间段，生命周期函数强调的是时间点。

2、组件生命周期函数分类

  • 组件创建阶段：new Vue()、beforeCreate、created、beforeMount、mounted
  • 组件运行阶段：beforeUpdate、updated
  • 组件销毁阶段：beforeDestroy、destroyed

3、生命周期详解图

从学习视频中获得

二、组件之间的数据共享

1、组件之间的关系

在项目开发中，组件之间的最常见的关系分为如下两种：
① 父子关系
② 兄弟关系

2、父子组件之间的数据共享

① 父 -> 子共享数据
② 子 -> 父共享数据

（1）父组件向子组件共享数据

父组件向子组件共享数据需要使用自定义属性。示例代码如下

// 父组件
<Left :username="username"></Left>

data() {
  return {
    username: 'admin'
  }
}

//  子组件
<template>
    <div>
        <p>用户名：{{username}}</p>
    </div>
</template>
<script>
export default {
    props:['username']
}
</script>

在这里插入图片描述

（2）子组件向父组件共享数据

子组件向父组件共享数据使用自定义事件。示例代码如下

// 父组件
<Right @changeName="chagneFromSon"></Right>
<script>
	methods: {
	  chagneFromSon(val) {
	    this.username = val;
	  }
	}
</script>

//  子组件
<template>
    <div>
        <button @click="change">我要换名字</button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            username: '来自子组件'
        }
    },
    methods: {
        change() {
            this.$emit('changeName', this.username)
        }
    },
}
</script>

在这里插入图片描述

3、兄弟组件之间的数据共享

在 vue2.x 中，兄弟组件之间数据共享的方案是 EventBus。

在这里插入图片描述

EventBus 的使用步骤
① 创建 eventBus.js 模块，并向外共享一个 Vue 的实例对象

import Vue from 'vue'
// 向外共享 Vue 的实例对象
export default new Vue()

② 在数据发送方，调用 bus.$emit('事件名称', 要发送的数据) 方法触发自定义事件

import bus from './eventBus.js'
export default {
    data() {
        return {
            msg: 'hello vue.js'
        }
    },
    methods: {
        sendMsg() {
            bus.$emit('share', this.msg)
        }
    }
}

③ 在数据接收方，调用 bus.$on('事件名称', 事件处理函数) 方法注册一个自定义事件

import bus from './eventBus.js'
export default {
    data() {
        return {
            msgFromLeft:''
        }
    },
    created() {
        bus.$on('share', val => {
            this.msgFromLeft = val
        })
    }
}

三、ref 引用

1、 什么是 ref 引用

  • ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。
  • 每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向一个空对象。

2、使用 ref 引用 DOM 元素

如果想要使用 ref 引用页面上的 DOM 元素，则可以按照如下的方式进行操作：

<h1 class="box" ref="appH1">根组件</h1>
<button @click="chagneColor">改变"根组件"颜色</button>

chagneColor() {
      this.$refs.appH1.style.color = 'red';
},

3、 使用 ref 引用组件实例

如果想要使用 ref 引用页面上的组件实例，则可以按照如下的方式进行操作：

<button @click="chagneUserColor">改变"用户名"字体颜色</button>
<Left :username="username" ref="leftCom"></Left>

methods: {
  chagneUserColor() {
    this.$refs.leftCom.chagneColor();
  }
},

在这里插入图片描述

4、 让文本框自动获得焦点

当文本框展示出来之后，如果希望它立即获得焦点，则可以为其添加 ref 引用，并调用原生 DOM 对象的.focus() 方法即可。示例代码如下

<input type="text" v-if="inputVis" ref="ipt">
<button v-else @click="showInput">展示输入框</button>

showInput(){
  this.inputVis=true;
  //数据已存在，但是还未渲染至页面，所以未实现，解决方法见（5、this.$nextTick(cb) 方法）
  this.$refs.ipt.focus();
},

5、 this.$nextTick(cb) 方法

组件的 $nextTick(cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是：等组件的DOM 更新完成之后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。

showInput(){
 this.inputVis=true;
 this.$nextTick(()=>{
   this.$refs.ipt.focus();
 })
},

六、购物车案例

1、案例效果

在这里插入图片描述

2、目录展示

在这里插入图片描述

3、代码实现

（1）main.js

import Vue from 'vue'
import App from './App.vue'
// 导入 bootstrap 样式表
import 'bootstrap/dist/css/bootstrap.min.css'

// 全局注册axios
import axios from 'axios'
Vue.prototype.axios = axios

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

（2）app.vue

<template>
  <div class="app-container">
    <Header :title="title"></Header>
    <Goods v-for="item in list" :key="item.id" :id="item.id" :tit="item.goods_name" :price="item.goods_price+''"
      :pic="item.goods_img" :status="item.goods_state" :num="item.goods_count"  @status-change="statusChange"></Goods>
    <Footer :fullState="fullState" :amt="amount" :count="count" @change-full="changeFull"></Footer>
  </div>
</template>

<script>
import Header from './components/Header/Header.vue'
import Goods from './components/Goods/Goods.vue'
import Footer from './components/Footer/Footer.vue'
import bus from './components/eventBus'
export default {
  components: {
    Header,
    Goods,
    Footer
  },
  computed: {
    fullState() {
      return this.list.every(item => item.goods_state)
    },
    amount() {
      return this.list.filter(item => item.goods_state).reduce((sum, item) => sum += item.goods_price * item.goods_count, 0)
    },
    count() {
      return this.list.filter(item => item.goods_state).reduce((sum, item) => sum = sum + item.goods_count, 0)
    }
  },
  data() {
    return {
      title: '购物车案例',
      list: [],
    }
  },
  created() {
    // 获取购物车列表
    this.initCartList();
    bus.$on('num', (val) => {
      this.list.some(item => {
        if (item.id == val.id) {
          item.goods_count = val.value;
          return true
        }
      })
    })
  },
  methods: {
    // 获取购物车列表
    async initCartList() {
      const { data: res } = await this.axios.get('https://www.escook.cn/api/cart')
      if (res.status == 200) {
        this.list = res.list
      }
    },
    // 商品选中状态变化
    statusChange(e) {
      console.log(e)
      this.list.some(item => {
        if (item.id === e.id) {
          item.goods_state = e.value
          return true
        }
      })
    },
    // 商品是否全选
    changeFull(e) {
      this.list.forEach(item => item.goods_state = e)
    }
  }
}
</script>

<style lang="less" scoped>
.app-container {
  padding-top: 45px;
  padding-bottom: 50px;
}
</style>

（3）Header.vue

<template>
  <div class="header-container">{{title}}</div>
</template>

<script>
export default {
  props:['title']
}
</script>

<style lang="less" scoped>
.header-container {
  font-size: 12px;
  height: 45px;
  width: 100%;
  background-color: #1d7bff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  position: fixed;
  top: 0;
  z-index: 999;
}
</style>

（4）Goods.vue

<template>
  <div class="goods-container">
    <!-- 左侧图片 -->
    <div class="thumb">
      <div class="custom-control custom-checkbox">
        <!-- 复选框 -->
        <input type="checkbox" class="custom-control-input" :id="'cb1'+id" :checked="status" @change="statuChange" />
        <label class="custom-control-label" :for="'cb1'+id">
          <!-- 商品的缩略图 -->
          <img :src="pic" alt="" />
        </label>
      </div>
    </div>
    <!-- 右侧信息区域 -->
    <div class="goods-info">
      <!-- 商品标题 -->
      <h6 class="goods-title">{{tit}}</h6>
      <div class="goods-info-bottom">
        <!-- 商品价格 -->
        <span class="goods-price">￥{{price}}</span>
        <!-- 商品的数量 -->
        <Counter :id="id" :num="num"></Counter>
      </div>
    </div>
  </div>
</template>

<script>
import Counter from '../Counter/Counter.vue'
export default {
  components: { Counter },
  props: {
    id: {
      require: true,
      type: Number,
    },
    tit: {
      default: '',
      type: String
    },
    pic: {
      default: '',
      type: String
    },
    price: {
      default: '',
      type: String
    },
    status: {
      default: true,
      type: Boolean
    },
    num: {
      default: 1,
      type: Number
    }
  },
  methods: {
    statuChange(e) {
      this.$emit('status-change', { id: this.id, value: e.target.checked })
    }
  }

}
</script>

<style lang="less" scoped>
.goods-container {
  +.goods-container {
    border-top: 1px solid #efefef;
  }

  padding: 10px;
  display: flex;

  .thumb {
    display: flex;
    align-items: center;

    img {
      width: 100px;
      height: 100px;
      margin: 0 10px;
    }
  }

  .goods-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;

    .goods-title {
      font-weight: bold;
      font-size: 12px;
    }

    .goods-info-bottom {
      display: flex;
      justify-content: space-between;

      .goods-price {
        font-weight: bold;
        color: red;
        font-size: 13px;
      }
    }
  }
}
</style>

（5）Counter.vue

<template>
  <div class="number-container d-flex justify-content-center align-items-center">
    <!-- 减 1 的按钮 -->
    <button type="button" class="btn btn-light btn-sm" @click="sub">-</button>
    <!-- 购买的数量 -->
    <span class="number-box">{{num}}</span>
    <!-- 加 1 的按钮 -->
    <button type="button" class="btn btn-light btn-sm" @click="add">+</button>
  </div>
</template>

<script>
import bus from '../eventBus'
export default {
  props: {
    id: {
      type: Number,
      require: true
    },
    num: {
      default: 1,
      type: Number,
    }
  },
  methods: {
    add() {
      bus.$emit('num', { id: this.id, value: this.num + 1 })
    },
    sub() {
      if (this.num > 1) {
        bus.$emit('num', { id: this.id, value: this.num - 1 })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.number-box {
  min-width: 30px;
  text-align: center;
  margin: 0 5px;
  font-size: 12px;
}

.btn-sm {
  width: 30px;
}
</style>

（6）Footer.vue

<template>
  <div class="footer-container">
    <!-- 左侧的全选 -->
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="cbFull" :checked="fullState" @change="fullChange" />
      <label class="custom-control-label" for="cbFull">全选</label>
    </div>

    <!-- 中间的合计 -->
    <div>
      <span>合计：</span>
      <span class="total-price">￥{{ amt.toFixed(2) }}</span>
    </div>

    <!-- 结算按钮 -->
    <button type="button" class="btn btn-primary btn-settle">结算（{{ count }}）</button>
  </div>
</template>

<script>
export default {
  props:{
    fullState:{
      default:false,
      type:Boolean
    },
    amt:{
      default:0,
      type:Number
    },
    count:{
      default:0,
      type:Number
    }
  },
  methods:{
    fullChange(e){
      this.$emit('change-full',e.target.checked)
    }
  }
}
</script>

<style lang="less" scoped>
.footer-container {
  font-size: 12px;
  height: 50px;
  width: 100%;
  border-top: 1px solid #efefef;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}

.custom-checkbox {
  display: flex;
  align-items: center;
}

#cbFull {
  margin-right: 5px;
}

.btn-settle {
  height: 80%;
  min-width: 110px;
  border-radius: 25px;
  font-size: 12px;
}

.total-price {
  font-weight: bold;
  font-size: 14px;
  color: red;
}
</style>

（7）eventBus.js

import Vue from 'vue'
export default new Vue();
步步生花@苏殿主
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue生命周期图解
12-13
vue的生命周期图解，从创建、装载到销毁，各个环节执行的方法
浅谈Vuex注入Vue生命周期的过程
10-16
在深入探讨Vuex如何注入Vue生命周期的过程中，首先要理解Vuex的核心概念和作用。Vuex是一个专为Vue.js设计的状态管理库，它通过集中管理应用程序的状态，解决了组件间数据共享和状态管理的问题。当应用程序的复杂性...
Vue基础入门（三）------ 生命周期 & 数据共享 & ref 引用
qq_45359288的博客
04-16 2530
目录1. 组件的生命周期2. 组件之间的数据共享父组件向子组件共享数据子组件向父组件共享数据兄弟组件之间的数据共享3. ref 引用使用 ref 引用 DOM 元素使用 ref 引用组件实例this.$nextTick(cb) 方法 1. 组件的生命周期 生命周期 & 生命周期函数 组件生命周期函数的分类 生命周期图示 可以参考 vue 官方文档给出的“生命周期图示”，进一步理解组件生命周期执行的过程： https://cn.vuejs.org/v2/guide/instance.html# 生
vue的生命周期
abcd2144163的博客
08-20 181
谈谈你对vue的生命周期的理解 vue整个生命周期实现了如下内容 initMixin(Vue) stateMixin(Vue) // 实现$watch $set $delete eventsMixin(Vue) // 实现$on $once $off $emit lifecycleMixin(Vue) renderMixin(Vue) vue...
【vue3系列】vue3之生命周期(带图)
热门推荐
qq_42445025的博客
12-16 5万+
Vue3之生命周期 主要Vue生命周期事件被分为两个钩子，分别在事件之前和之后调用，vue应用程序中有4个主要事件(8个钩子)： 创建 ---- 在组建创建时执行 挂载 ---- DOM被挂载时执行 更新 ---- 当响应数据被修改时执行 销毁 ---- 在元素被销毁之前立即执行 在【options API】中，生命周期钩子是被暴露在vue实例上的选项，我们只需要调用使用即可。 在【composition API】中，我们需要将生命周期钩子导入项目，然后才能使用。 import {onMounted
Vue(四)：生命周期&数据共享
baiduwenku112的博客
12-27 558
一、组件的生命周期 1.1 生命周期&生命周期函数 生命周期是指一个组件从创建->运行->销毁的整个阶段，强调的是一个时间段。 生命周期函数：由vue框架提供的内置函数，会伴随着组件的生命周期，自动按序执行。 1.2 组件生命周期函数的分类 1.3 生命周期图示例 VUE官网生命周期图--------------------Vue 实例 — Vue.js created生命周期函数，非常常用，经常在它里面，调用methods中的方法，请求服务器的数据。并且把请求..
解决vue刷新页面以后丢失store的数据问题
10-14
这段代码首先在组件的`created`生命周期钩子中检查sessionStorage是否存在名为'store'的条目，如果存在，就将存储的state合并到当前的store中。然后，它监听`beforeunload`事件，当页面即将刷新时，将当前的store...
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
10-15
现在，在需要使用Vuex的组件中，例如在组件的`created()`生命周期钩子中，通过`this.$store.dispatch`触发action： ```javascript created() { this.$store.dispatch('getMineBaseApi') } ``` 在`store/modules/...
VUE DEMO之模拟登录个人中心页面之间数据传值实例
10-16
这个实例展示了Vue与浏览器本地存储的结合使用，以及如何在不同Vue实例间共享数据。在实际开发中，这可以解决单页应用（SPA）中页面间的通信问题，尤其是在没有路由的情况下。然而，需要注意的是，`localStorage`的...
vue3生命周期图示
m0_50789201的博客
06-04 1737
与vue2生命周期相比，vue2使用了组合式API，并且在执行时，vue3的生命周期钩子要早于vue2.
State&生命周期
Geordies的博客
03-24 226
State 与 props 类似，但是 state 是私有的，并且完全受控于当前组件. State类似于vue中的data选项 在没有useState钩子函数之前，是通过class组件管理State ？ class Clock extends React.Component { render() { return ( <div> <h1&g...
vue3.0生命周期中文翻译图
海军-NAVY
02-11 956
听过这么一个事，有些开发朋友英语不太好，干了好久前端了，但看是不明白生命周期图，我做了一下总结，相信看了下面图就会了解vue的整个运行周期原理了。
一起来聊聊Vue3的这“一生（生命周期）”
李公子的博客
08-20 1700
什么是生命周期： vue中每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。 vue2和vue3中生命周期的对比： 对Vue2生命周期不熟悉的同学可以看我的另一篇文章Vue2的生命周期 Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名： beforeDestroy改名为 beforeUnmount destroyed改名为 unmounted ...
vue生命周期中文图
一如既往的博客
08-15 3352
一、整理的Vue生命周期中文图 二、个人理解的Vue生命周期 什么是生命周期? 简而言之:从生到死的过程,从Vue实例创建-运行-销毁的过程 Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程 生命周期方法? Vue从生到死的过程中伴随着各种各样的事件,这些事件会自动触发一些方法.这些方法我们统称为生命周期方法 生命周期钩子 = 生命周期函数 = 生命周期事件 创建期间生命周期方法 beforeCrea.
【Vue3】第五部分 Vue3生命周期
Trees__的博客
03-17 917
【Vue3】第五部分 Vue3生命周期 文章目录【Vue3】第五部分 Vue3生命周期5.Vue3生命周期5.1 Vue3和Vue2对比图5.2 通过配置项的形式使用生命周期钩子5.3 通过组合式API的形式去写生命周期钩子总结 5.Vue3生命周期 5.1 Vue3和Vue2对比图 vue2.x的生命周期vue3.0的生命周期 5.2 通过配置项的形式使用生命周期钩子 Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名： beforeDestroy改名为 beforeUn
【前端】Vue生命周期函数（详细讲解+中文图解）
最新发布
山赶着山，山山漫漫结成关
08-09 1万+
Vue生命周期函数（详细讲解+中文图解）
vue生命周期函数面试题
weixin_45644355的博客
07-24 2948
1.什么是 vue 生命周期？有什么作用？ 答：每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子 的函数，这给了用户在不同阶段添加自己的代码的机会。（ps：生命周期钩子就是生命周期函数）例如，如果要通过某些插件操作DOM节点，如想在页面渲染完后弹出广告窗， 那我们最早可在mounted 中进行。 2.第一次页面加载会触发哪几个钩子？ 答：beforeCreate，
Vue3-04-生命周期
晴雪月乔的博客
06-12 7239
Vue 生命周期
Vue监听器、生命周期、组件通信和路由的学习感受
07-09
2. 生命周期钩子（Lifecycle Hooks）：Vue提供了一系列的生命周期钩子函数，用于在组件的生命周期各个阶段执行自定义的代码逻辑。这些钩子函数包括`created`、`mounted`、`updated`等等。通过生命周期钩子函数，我...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值