58 组件通信（组件传值）、在脚手架中引入jquery（其他插件）、ref属性、组件嵌套的生命周期流程、is属性、组件的缓存(扩展)
58 组件通信（组件传值）、在脚手架中引入jquery（其他插件）、ref属性、组件嵌套的生命周期流程、is属性、组件的缓存(扩展)
一、组件通信（组件传值）
1.1概念
组件之间可以互相传递数据
1.2组件通信的方式
1.2.1父子组件通信
-
父组件
<子组件 :自定义属性1='变量1' 自定义属性='字符串'</子组件>
-
子组件
{
props:['自定义属性1','自定义属性'...]
}
props属性和data以及computed一样都是直接挂载到vue实例上的，所以命名的时候一定不能重复！！！
props属性的优先级要高于data!!!
-
注意点：props是一个单项数据流！！！
props 是单项数据流，只能调用不能直接修改！！！
如果你非要修改，把它赋值给data属性或者computed属性，去修改这两个属性才可以！！！还有一种方式！！！利用子传父去修改父组件的数据！！！
单项数据流只能一级一级传递，不能跨级别传递。只能父传子传子传子不能爷传孙。不能隔代遗传！！！
-
props的验证
props你可以直接用数组去接收数据。然是一些项目为了严谨，针对于父组件传递的数据类型进行验证。props也提供了这种功能
// prosp的验证，即使验证失败，页面也会渲染，但是控制台会报错！！如果你验证了，那就要按照严格模式传递数据！！！
props: {
//对象
msg: String, //单项数据类型验证
isShow: [Boolean, String], //多数据类型验证,只要符合一个验证就通过
goodsname: {
//默认值的用法，如果你在父组件中传递这个变量。结果就是变量否则就是你的默认值
type: String, //数据类型
default: "奔驰！！！", //默认值
},
//必填项验证
gamename: {
type: String,
default: "王者荣耀",
required: true, //必填项
},
//创建一个自定义的验证器
num: {
//验证器 如果创建验证器，那么你就要返回一个true或者false
//验证器的参数代表你要验证的内容
validator(val) {
console.log(val, "自定义验证器");
if (val.length > 3) {
return false;
} else {
return true;
}
},
},
},
1.2.2子父组件通信
-
父组件
<子组件 @自定义事件名称='父组件的methods'></子组件>
逻辑
{
methods:{
父组件的methods(e){
//e当前事件源就是子组件传递的数据
}
}
}
-
子组件
视图
<div>
<button @click='子组件的methods'>给父亲</button>
</div>
逻辑
{
methods:{
子组件的methods(){
this.$emit('自定义事件名称',要传递的内容)
}
}
}
1.2.3非父子组件通信
-
单一事件管理（EventBus）
-
main.js
//创建一个全局的单一事件管理
//在vue的原型上挂载一个变量，这个变量含有$emit和$on
Vue.prototype.变量 = new Vue()-
发送方
视图
<div>
<button @click='发送方的methods'></button>
</div>
逻辑
{
methods:{
发送方的methods(){
this.变量.$emit('自定义事件名称',要传递的内容)
}
}
}-
接收方
mounted(){ //挂载
this.变量.$on('自定义事件名称',(数据)=>{
//数据就是发送方传递的数据
})
} -
你基本上这辈子用不上，极力不推荐
-
vuex状态管理（推荐！！！）
-
离线存储！！！
二、在脚手架中引入jquery（其他插件）
一般情况下，我们尽量少的去操作DOM节点，数据去控制视图。jq是疯狂的操作DOM节点。如非必要，不用调用jq
npm install(i) jquery
+ jquery@3.6.0
2.1 局部引入
<template>
<div class='box'>
<h1>jquery案例</h1>
<ul>
<li v-for="item in newslist" :key='item.id'>
标题：
2.2全局引入
main.js
//全局引入jquery 的核心库
import jq from 'jquery'
//把jquery的库挂载到vue原型上，保证组件中每一个实例都可以获取jq的方法和属性
Vue.prototype.$jq= jq
组件中
mounted() {//挂载
//组件一加载调用接口 ，调用的是在线免费接口，所以没有跨域问题！！！
console.log(this,'实例');
this.$jq.ajax({
url:'http://jsonplaceholder.typicode.com/posts', //要链接的接口地址
// data:{} 要传入的参数，没有就省略
// type:'get /post' get 方式可以省略
success:(res)=>{ //要利用箭头函数去改变this，把this指向vue实例
console.log(res,'是调用接口获取的响应结果');
//利用数组操作方法filter对数组进行过滤
this.newslist = res.filter((item,i)=>i<20)
}
})
},
三、ref属性
3.1概念
ref可以快速获取DOM节点
3.2使用场景
视频播放，音乐播放，一定要操作DOM才能实现逻辑的时候
3.3基本使用
<标签 ref='属性'></标签>
获取节点： this.$refs.属性
3.4实战案例
<template>
<div class='box'>
<h1 ref='hInfo'>音乐案例</h1>
<audio ref="audio" :src="url" ></audio>
<div class="musicImg">
<img v-if="isShow" @click='toPlay' src="https://img2.baidu.com/it/u=2972858722,2391812969&fm=26&fmt=auto&gp=0.jpg" alt="">
<img v-if="!isShow" @click='toPause' src="https://img1.baidu.com/it/u=1234155765,2611351147&fm=26&fmt=auto&gp=0.jpg" alt="">
</div>
</div>
</template>
<script>
export default {
data() {
return {
url:'http://m801.music.126.net/20210412155759/8184ec18947b26808e64518ba7a1b16a/jdyyaac/515e/525c/560c/f4b2a825d1e616096518af5a57cd2be2.m4a',
isShow:true
};
},
methods: {
//播放事件
toPlay(){
//play() audio标签的内置方法
this.$refs.audio.play()
//改变图片状态
this.isShow = false
},
//暂停事件
toPause(){
//pause() audio标签的内置方法
this.$refs.audio.pause()
this.isShow =true
}
},
};
</script>
<style scoped>
.box {
width: 90%;
margin: 20px auto;
border: 1px solid orange;
}
.musicImg img{
width: 120px;
height: 120px;
}
</style>
四、组件嵌套的生命周期流程
组件一加载
父组件的创建之前 => 父组件的创建完成 =>父组件挂载之前 => 子组件的创建之前 => 子组件的创建完成 =>子组件挂载之前 =>子组件挂载完成 =>父组件挂载完成
数据发生变化
父组件的数据发生变化，不影响子组件的内容。局部更新
子组件的数据发生变化，不影响父组件的内容。局部更新
五、is属性
5.1概念(作用)
可以替代标签渲染组件
5.2基本使用
你也可以通过is属性去进行组件的渲染
<div is='组件名称'></div>
5.3动态组件切换（动态is切换）
视图
<div>
<button @click="gCom='vSon'">组件</button>
<button @click="gCom='vGoods'">商品</button>
</div>
<div :is='gCom'></div>
逻辑
data() {
return {
gCom:'vSon'
};
},
六、组件的缓存(扩展)
为什么会有组件的缓存？？？？
产品需求：
比如一页面，内容。你每次触发的时候，它都会重新实例化，比较浪费性能，这时，可以把当前组件进行缓存！！！调用<keep-alive></keep-alive>
如果某一个组件不缓存，如何去除这种缓存机制？？？
调用函数 activated(){} //使激活
浙公网安备 33010602011771号