Java登陆第三十八天——VUE3生命周期、钩子函数、组件拼接、组件传参(组件通信)

合集 - Java登陆(70)

1.Java登陆第一天——Mysql安装2023-11-082.Java登陆第一天——Maven入门2023-11-083.Java登陆第二天——SQL之DDL2023-11-094.Java登陆第二天——SQL之DML2023-11-095.Java登陆第三天——SQL之DQL(一)基础查询、聚合函数、分组查询2023-11-106.Java登陆第四天——SQL之DQL(二)分页查询、多表查询、自连接2023-11-117.Java登陆第五天——SQL之DQL(三)子查询2023-11-128.Java登陆第六天——SQL之表复制，表去重，合并查询2023-11-149.Java登陆第六天——SQL之SQL(四)外连接2023-11-1410.Java登陆第六天——SQL之约束2023-11-1411.Java登陆第七天——SQL之事务2023-11-1512.Java登陆第七天——SQL之事务隔离2023-11-1613.Java登陆第八天——SQL之DCL2023-11-1614.Java登陆第九天——JDBC(一)DriverManager、Connection、Statement2023-11-1915.Java登陆第十天——JDBC(二)ResultSet2023-11-2016.Java登陆第十一天——JDBC(三)PreparedStatement、CLOB、BLOB2023-11-2117.Java登陆第十二天——网络编程(一)网络的概念2023-11-2318.Java登陆第十二天——网络编程(二)InetAddress、Socket2023-11-2319.Java登陆第十三天——网络编程(三)DatagramSocket2023-11-2420.Java登陆第十四天——网络编程(四)韩顺平网络编程2023-11-2521.Java登陆第十五天——网络编程(四)韩顺平网络编程2023-11-2922.Java登陆第十六天——网络编程(四)韩顺平网络编程2023-11-3023.Java登陆第十七天——网络编程(四)韩顺平网络编程完成2023-12-0424.Java登陆第十七天——正则表达式2023-12-0425.Java登陆第十八天——Java8之Lambda表达式2023-12-0526.Java登陆第十九天——HTML规范与语法2023-12-0627.Java登陆第二十天——HTML常用标签2023-12-0728.Java登陆第二十一天——CSS2023-12-1029.Java登陆第二十二天——JavaScript入门2023-12-1130.Java登陆第二十三天——JavaScript对象、JSON、事件2023-12-1231.Java登陆第二十四天——JavaScriptBOM、DOM2023-12-1432.Java登陆第二十五天——Tomcat、认识JavaWeb项目2023-12-1833.Java登陆第二十六天——Http2023-12-2034.Java登陆第二十六天——Servlet2023-12-2035.Java登陆第二十七天——多种方法Servlet映射、Content-Type2023-12-2136.Java登陆第二十八天——Servlet生命周期2023-12-2237.Java登陆第二十九天——Servlet继承关系，service和doGet的区别2023-12-2338.Java登陆第二十九天——ServletConfig和ServletContext2023-12-2339.Java登陆第二十九天——HttpServletRequest和HttpServletResponse2023-12-2440.Java登陆第二十九天——请求转发和响应重定向2023-12-2541.Java登陆第三十天——Cookie和Session2023-12-2742.Java登陆第三十天——域对象2024-01-0243.Java登陆第三十一天——Filter2024-01-1744.Java登陆第三十一天——监听器2024-01-1945.Java登陆第三十二天——AJAX和异步2024-03-0646.Java登陆第三十二天——前端工程化2024-03-0747.Java登陆第三十二天——ES6(一)let、const、模板字符串、解构表达式、箭头函数2024-03-0848.Java登陆第三十三天——ES6(二)reset、spread、Class类语法糖2024-03-0949.Java登陆第三十三天——ES6(二)浅拷贝、深拷贝2024-03-0950.Java登陆第三十三天——ES6(二)模块、模块化2024-03-0951.Java登陆第三十四天——Node.js安装、npm配置、npm命令2024-03-1052.Java登陆第三十四天——使用Vite创建工程化的Vue3项目2024-03-1153.Java登陆第三十五天——Vite+Vue3目录结构、.vue文件理解（SFC）2024-03-1454.Java登陆第三十五天——VUE初始页面解析2024-03-1455.Java登陆第三十六天——VUE3引入CSS2024-04-0256.Java登陆第三十六天——VUE3响应式入门、setup语法糖2024-04-0257.Java登陆第三十七天——VUE3插值表达式、文本渲染、属性渲染、事件绑定2024-04-0358.Java登陆第三十七天——VUE3响应式基础、条件渲染、列表渲染2024-04-0459.Java登陆第三十八天——VUE3双向绑定，监听器(侦听器)2024-04-05

60.Java登陆第三十八天——VUE3生命周期、钩子函数、组件拼接、组件传参(组件通信)2024-04-05

61.Java登陆第三十九天——Router路由入门2024-04-0662.Java登陆第三十九天——Router编程式路由，路由传参2024-04-0663.Java登陆第四十天——Router路由守卫2024-04-0764.Java登陆第四十天——Router路由守卫练习2024-04-0765.Java登陆第四十一天——Promise、async关键字、await关键字2024-04-0866.Java登陆第四十一天——Axios2024-04-0967.Java登陆第四十二天——Axios拦截器2024-04-1068.Java登陆第四十二天——跨域2024-04-1469.Java登陆第四十三天——Pinia2024-04-1770.Java登陆第四十四天——跟写微头条遇到的问题2024-04-25

收起

生命周期

之前在Servlet等也学习过生命周期，相同的，VUE组件也有生命周期。

VUE组件完全解析到浏览器，会经过如下过程。（简单理解）

1. vue组件被实例化的过程，称为，组件实例化。

2. 组件实例解析到浏览器中，称为，挂载。

3. 组件实例从浏览器中删除，称为，卸载。

钩子函数

vue组件解析到浏览器的这个过程中，会触发一些函数。

这些函数也被称为钩子函数。(钩子函数需手动导入)

常用钩子函数如下：

钩子函数名	什么时候调用
onBeforeMount()	组件挂载之前
onMounted()	组件挂载之后
onBeforeUpdate()	组件更新之前
onUpdated()	组件更新之后
onBeforeUnmount()	组件卸载之前
onUnmounted()	组件卸载之后

组件实例内部储存的属性，一般是响应式数据，响应式数据一更新，这个组件实例也就更新了。

栗子

App.vue

<script setup>
//生命周期
import {ref, onMounted, onUpdated} from 'vue';

let msg = ref("hello");

onMounted(function () {
  console.log("----------组件挂载完毕-------------")
  console.log(msg.value)
});

onUpdated(function () {
  console.log("----------组件更新后-------------")
  console.log(msg.value)
});
</script>

<template>
  <input v-model="msg" type="text"><br>
  {{ msg }}
</template>

<style scoped>
</style>

效果展示

组件拼接

之前提及过SFC（Single-File Component，简称 SFC,单文件组件）。

在VUE中，就是编写一个个的组件，再将各个组件拼凑成完整的页面。

假设需求如下：

栗子（仅展示部分代码）

App.vue

<script setup>
//组件拼接，注意 避免标签和vue自带的标签或原生标签重名。
import headte from './components/head.vue'
import menuer from './components/menu.vue'
import conter from './components/content.vue'
</script>

<template>
  <headte class="headte"></headte>
  <menuer class="menuer"></menuer>
  <conter class="conter"></conter>
</template>

<style scoped>
  .headte{
    height: 80px;
    border: 1px solid red;
  }
  .menuer{
    width: 15%;
    height: 400px;
    border: 1px solid red;
    float: left;
  }
  .conter{
    width: 80%;
    height: 400px;
    border: 1px solid red;
    float: right;
  }
</style>

效果展示

此时，就完成了组件的拼接。

需求：点击左侧的菜单，菜单文本信息会显示到右侧。

这就需要组件传参完成。

组件传参(组件通信)

组件传参有三种：

1. 父传参子

   • 父组件传参给子组件

2. 子传父

   • 子组件传参给父组件

3. 兄弟传参

   • 基于父传子和子传父完成的传参。

所以只演示兄弟传参。

提供了两个函数：defineEmits和defineProps

语法格式如下：

//返回值是一个常量对象，对象.事件名就可以执行该事件(子传父)
 const emits = defineEmits(['一个自定义事件','或多个自定义事件','...']);

//这个函数负责接收自定事件的返回值。(父传子)
 defineProps({自定事件返回值:返回值类型})

利用这一点，完善组件拼接的需。

：点击左侧的菜单，菜单文本信息会显示到右侧。

完善组件拼接的栗子

menu.vue。利用defineEmits函数完成子传父。

<script setup>
import {defineEmits} from 'vue'

const emits = defineEmits(['sendMenuMsg']);

function sendMenuMsg(msg) {//因为menu的父组件是App.vue。sendMenuMsg可在父组件里充当一个事件。
  emits('sendMenuMsg',msg)
}
</script>

<template>
  <ul>
    <li @click="sendMenuMsg('我的世界')">我的世界</li>
    <li @click="sendMenuMsg('英雄联盟')">英雄联盟</li>
    <li @click="sendMenuMsg('吃饭睡觉')">吃饭睡觉</li>
  </ul>
</template>

<style scoped>
</style>

App.vue。是menu.vue的父组件，再转发给子组件content.vue。

<script setup>
//组件拼接，注意 避免标签和vue自带的标签或原生标签重名。
import {ref} from 'vue'
import headte from './components/head.vue'
import menuer from './components/menu.vue'
import conter from './components/content.vue'

let msg = ref("");

//事件就是menu.vue定义的sendMenuMsg。把数据传递给msg。
function getMenuMsg(data) {
  msg.value = data
}

</script>

<template>
  <headte class="headte"></headte>
  <!--子传父，通过事件-->
  <menuer class="menuer" @sendMenuMsg="getMenuMsg"></menuer>
  <!--父传子，通过属性-->
  <conter class="conter" v-bind:msg="msg"></conter>
</template>

<style scoped>
.headte {
  height: 80px;
  border: 1px solid red;
}

.menuer {
  width: 15%;
  height: 400px;
  border: 1px solid red;
  float: left;
}

.conter {
  width: 80%;
  height: 400px;
  border: 1px solid red;
  float: right;
}
</style>

content.vue.vue

<script setup>
import {defineProps} from 'vue'
defineProps({
  msg:String
})
</script>
<template>
  <h3>用户点击了：{{msg}}</h3>
</template>

<style scoped>
</style>

效果展示

不难发现，太复杂啦！！！在后面的学习中，会学习Pinia代替原生的方式完成组件通信。