携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第19天，点击查看活动详情
一。组件激活和失活
1.keep-alive组件用于缓存路由组件页面
<!-- 该组件默认缓存所有的路由组件，可以通过include属性绑定一个数组指定缓存 哪些组件数组中设置的是组件的名称-->
<keep-alive :include="['aodi']">
<router-view></router-view>
</keep-alive>
设置前，当页面从奥迪切换走的时候添加的数据会消失，但是设置后，切换走在切换回来添加的数据还在
注意：
// 组件缓存后不会重复触发挂载和销毁这两个生命周期函数，只是在第一次打开页面时候触发挂载生命周期函数
// 如果路由组件被缓存了，就会触发另外两个生命周期函数
// 组件激活和组件失活
奔驰页面没有设置组件缓存，可以看到，切换进出都会触发挂载完成和销毁函数
奥迪页面设置组件缓存，只会在页面首次挂载完成触发加载完成函数
组件激活
activated() {
console.log("奥迪组件激活");
},
组件失活
deactivated() {
console.log("奥迪组件失活");
},
只有设置了组件缓存才会触发组件激活和组件失活这两个函数
二。省市县三级联动
1.数据
[{ "id":1, "name":"江苏省", "pid":0},{ "id":101, "name":"南京市", "pid":1},{ "id":10101, "name":"秦淮区", "pid":101},{ "id":10102, "name":"玄武区", "pid":101},{ "id":102, "name":"苏州市", "pid":1},{ "id":10201, "name":"姑苏区", "pid":102},{ "id":10202, "name":"虎丘区", "pid":102},{ "id":2, "name":"浙江省", "pid":0},{ "id":201, "name":"杭州市", "pid":2},{ "id":20101, "name":"江干区", "pid":201},{ "id":20102, "name":"滨江区", "pid":201},{ "id":202, "name":"温州市", "pid":2},{ "id":20201, "name":"鹿城区", "pid":202},{ "id":20202, "name":"龙湾区", "pid":202},{ "id":3, "name":"安徽省", "pid":0},{ "id":301, "name":"合肥市", "pid":3},{ "id":30101, "name":"蜀山区", "pid":301},{ "id":30102, "name":"庐阳区", "pid":301},{ "id":302, "name":"马鞍山市", "pid":3},{ "id":30201, "name":"花山区", "pid":302},{ "id":30202, "name":"雨山区", "pid":302}]
2.页面
<template>
<div class="bc">
<h2>奔驰</h2>
<select v-model="provinceId">
<option value="0">请选择省份</option>
<option v-for="(item, index) in full" :key="item.id" :value="item.id">
{{ item.name }}
</option>
</select>
<select v-model="cityId">
<option value="0">请选择城市</option>
<option v-for="(item, index) in city" :key="item.id" :value="item.id">
{{ item.name }}
</option>
</select>
<select v-model="districId">
<option value="0">请选择区县</option>
<option v-for="(item, index) in distric" :key="item.id" :value="item.id">
{{ item.name }}
</option>
</select>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
list: [],
// 省份编号
provinceId: 0,
// 城市编号
cityId: 0,
//区县编号
districId: 0,
};
},
mounted() {
axios.get("/data/city.json").then(({ data }) => {
this.list = data;
});
},
computed: {
返回pid==0的，也就是省份
full() {
return this.list.filter((r) => r.pid == 0);
},
city() {
如果不设置 this.cityId = 0,当this.provinceId=0的时候返回的是空数组，那么cityId也就为空了
this.cityId = 0;
if (this.provinceId > 0) {
console.log(this.provinceId );
return this.list.filter((r) => r.pid == this.provinceId);
} else {
return [];
}
},
distric() {
this.districId = 0;
if (this.cityId > 0) {
return this.list.filter((r) => r.pid == this.cityId);
} else {
return [];
}
},
},
};
</script>
