组件间关系
组件间注册的原因可以分成以下两种关系:
父子组件
兄弟组件
由于组件间的两种关系 所以有了三种通信
父向子传数据
子向父传数据
兄弟之间传数据
傻瓜组件
聪明组件 容器
父向子传数据
子组件中增加props属性
写法两种：
1，数组 数组各个值 就是 父组件向子组件传的数据的键，使用跟data中的数据用法是一样的
所以需要注意的是 props数组中的值 不能和data中的值重名
2，对象 在props需要验证的时候用，此时 格式对对象， 对象的不同的属性 就是父向子传的数据的键值
验证类型 一般有：type Number String Object Array Boolean
required 必须传验证 true/false
default 默认值 注意 当 type为Object/Array时，默认值需要是一个函数返回这个值
怎么传：
组件的自定义标签的属性传入，属性传值有两种
静态的值
<home msg='xxx'></home>
动态值
<home :msg='xxx'></home> xxx是父组件中data的某个state
子向父传数据
子组件中通过：
this.$emit("事件名",值)
父组件 template
<child @子组件事件="事件函数"></child>
bus 事件总线
谁弹射的事件 只能谁来接手
js接收弹射的事件 有一个方法 this.$on("事件名",callback)
声明一个第三方的实例：
好处：
在任意的一个组件中 使用 第三方组件 弹射事件
在任意一个组件中 使用 第三方组件接收
const bus = new Vue();
a组件中
bus.$emit('事件名',值)
b组件中
bus.$on('事件名',callback)
ref 通信 了解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="box">
<home></home>
</div>
<template id="tpl">
<div>
<button @click = 'change'>按钮</button>
<h3>我是父组件</h3>
<navs ref="navs"></navs>
</div>
</template>
<script>
let Navs={
template:`
<div>我是子组件</div>
`,
data(){
return {
msg:123
}
}
}
// 声明一个全局
Vue.component("Home",{
template:"#tpl",
methods:{
change(){
console.log(this.$refs.navs);
}
},
components: {
Navs
}
});
new Vue({
el:"#box"
})
</script>
</body>
</html>
slot 插槽
理解他是一个 占位 槽 组件在使用时， 槽会被真实的其他结构代替
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="box">
<home></home>
<hr>
<news></news>
</div>
<script>
//头部
let Header1 = {
template:`
<div>
<h1>我是头部</h1>
<slot></slot>
</div>
`
}
Vue.component("Home",{
template:`
<div>
home组件
<header1>
<p>
我是p标签自定的内容，也就是要覆盖slot的内容
</p>
</header1>
</div>
`,
components: {
Header1
}
});
Vue.component("News",{
template:`
<div>
news组件
<header1>
<p>
我是news组件自定义内容
</p>
</header1>
</div>
` ,components: {
Header1
}
});
new Vue({
el:"#box"
})
</script>
</body>
</html>
命名插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="box">
<home></home>
<hr>
<news></news>
</div>
<script>
//头部
let Header1 = {
template:`
<div>
<slot name="header"></slot>
<h1>我是主体</h1>
<slot></slot>
<slot name="footer"></slot>
</div>
`
}
Vue.component("Home",{
template:`
<div>
home组件
<header1>
<h3 slot="footer">我是底部</h3>
<h1 slot="header">我是头部</h1>
<div>11111111</div>
</header1>
</div>
`,
components: {
Header1
}
});
Vue.component("News",{
template:`
<div>
news组件
<header1>
<p>
我是news组件自定义内容
</p>
</header1>
</div>
` ,components: {
Header1
}
});
new Vue({
el:"#box"
})
</script>
</body>
</html>
动态组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue.js"></script>
<style>
#foot{
position: fixed;
bottom:0;
height:50px;
left:0;
right:0;
background: rgb(118, 129, 103);
display: flex;
align-items: center;
justify-content: space-around;
}
a{
text-decoration: none;
color:#f1f2f1;
}
</style>
</head>
<body>
<div id="box">
<component :is="who"></component>
<footer id="foot">
<a href="javascript:;" @click="who='home'">首页</a>
<a href="javascript:;" @click="who='news'">新闻页</a>
<a href="javascript:;" @click="who='employee'">人才招聘</a>
</footer>
</div>
<script>
let Home={
template:`
<h1>我是首页</h1>
`
}
let News={
template:`
<h1>我是新闻页</h1>
`
}
let Employee ={
template:`
<h1>我是人才招聘</h1>
`
}
new Vue({
el: "#box",
data:{
who:"home"
},
components: {
Home,
News,
Employee
}
})
</script>
</body>
</html>
系统组件
template
component
slot
keep-alive
vue 路由 按需 keep-alive
situation
一个常见的的场景，
主页 -->前进 列表页 -->前进详情页，
详情页 -->返回 主页 -->返回 列表页
我们希望，
从 详情页
-->返回
列表页 的时候页面的状态是缓存，不用重新请求数据，提升用户体验。
从 列表页
-->返回
主页 的时候页面，注销掉列表页，以在进入不同的列表页的时候，获取最新的数据。
task
今天 让我们来实现这个需求。
在 代码的世界里 解决问题的 方法 从来都不止一种。
比如，从数组中找到一个的值索引：
可以用最基础的 for循环 遍历，也可以用indexOf这种工具函数，还可以用findIndex forEach等更语义化的高阶函数来遍历。
我参考了大量的文章，爬了官方的文档，之后，找到了好几种办法，下面，让我们来一个个分析。
let's begin ， 我们开始吧。🙌
解决掉提需求的人
😂 emm... ，相对于我们的人生，可能代码会更好掌控吧。
程序员活在自己想象的王国里
我刚接触电脑就发现电脑的妙处，电脑远没有人那么复杂。如果你的程序写得好，你就可以和电脑处好关系，就可以指挥电脑干你 想干的事。这个时候你是十足的主宰。 每每你坐在电脑面前，你就是在你的王国里巡行，这样的日子简直就是天堂般的日子。 电脑里的世界很大，编程人是活在自己想象的王国里。你可以想象到电脑里细微到每一个字节、每一个比特的东西。
-- 雷军(没错就是小米那个雷军)
我很认同雷军的说法，
人生能找到一个 热爱 的东西很难得，你 热爱代码 并 专注于它的话，
终有一天，
它会以各种各样的方式回报给你：工资，认同感，成就感，和你一起进步，心里共鸣的人。
你若盛开，蝴蝶自来。诸君共勉 (能骗一个相信，就少一个沙雕和我抢妹子🤣)
睡服♂提需求的人
😂emm..., 看着镜子里那张的脸，这辈子应该是没办法从脸上得到任何的便利了...
keep-alive
keep-alive是Vue提供的一个抽象组件，主要用于保留组件状态或避免重新渲染。
但是 keep-alive会把其包裹的所有组件都缓存起来。
action
我们把需求分解成2步来实现
1.把需要缓存和不需要缓存的视图组件区分开
思路如下图:
写2个 router-view 出口
<keep-alive>
<!-- 需要缓存的视图组件 -->
<router-view v-if="$route.meta.keepAlive">
</router-view>
</keep-alive>
<!-- 不需要缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive">
</router-view>
复制代码
在Router里定义好需要缓存的视图组件
new Router({
routes: [
{
path: '/',
name: 'index',
component: () => import('./views/keep-alive/index.vue'),
meta: {
deepth: 0.5
}
},
{
path: '/list',
name: 'list',
component: () => import('./views/keep-alive/list.vue'),
meta: {
deepth: 1
keepAlive: true //需要被缓存
}
},
{
path: '/detail',
name: 'detail',
component: () => import('./views/keep-alive/detail.vue'),
meta: {
deepth: 2
}
}
]
})
复制代码
2.按需keep-alive
我们从官方文档提供的api入手,
keep-alive组件如果设置了 include ，就只有和 include 匹配的组件会被缓存，
所以思路就是，动态修改 include 数组来实现按需缓存。
<keep-alive :include="include">
<!-- 需要缓存的视图组件 -->
<router-view v-if="$route.meta.keepAlive">
</router-view>
</keep-alive>
<!-- 不需要缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive">
</router-view>
复制代码
让我们在app.vue里监听路由的变化,
export default {
name: "app",
data: () => ({
include: []
}),
watch: {
$route(to, from) {
//如果 要 to(进入) 的页面是需要 keepAlive 缓存的，把 name push 进 include数组
if (to.meta.keepAlive) {
!this.include.includes(to.name) && this.include.push(to.name);
}
//如果 要 form(离开) 的页面是 keepAlive缓存的，
//再根据 deepth 来判断是前进还是后退
//如果是后退
if (from.meta.keepAlive && to.meta.deepth < from.meta.deepth) {
var index = this.include.indexOf(from.name);
index !== -1 && this.include.splice(index, 1);
}
}
}
};
复制代码
需要注意的是
keep-alive需要其包裹的组件有name属性，
我们上面的代码中的 push 和 splice 的是 router 的 name。
所以建议大家把 route 的 name属性设置和 route对应component的name设成一样的。
result
让我们验证一下我们的成果
在 vue-devtool 里，灰色的组件，代表是缓存状态的组件，注意观察list的变化。
写在最后
实现按需 keep-alive ，网上有方法，通过修改 route 配置里的 meta里的 keepAlive 值来实现。
直接修改 meta 的值，可能会出现上图的情况，keep-alive里有一直有一个缓存的 list,正常的 rotuer-view 里也有一个,
复现这个问题需要很长得篇幅，感兴趣的朋友可以自己去爬一下坑。
还有得方法是 通过在keep-alive 的视图组件在退出 rotuer 的时候，调用this.$destory() 直接摧毁组件，这会导致组件没法在缓存，这个bug ，在官方issue有提到。
参考资料
官方issue
Vue项目全局配置页面缓存，实现按需读取缓存
关于动画
谢谢大家的点赞和回复，我看好多人想要demo的源码这里分享一下。
因为我公司目前还没有,vue的项目给我施展拳脚。我当时写demo的时候，想的也不是动画方面的封装和优化，
所以分享的demo里的代码里，关于动画，会有很多重复的代码和丑陋的实现。还请多见谅
我昨天做了个小手术，这段时间需要休息，评论有很多精彩的回复，我没办法解答和实现了。
源码链接
关于demo动画的一些分析，可以看我的前2篇文章
vue动画
transition组件只支持 单元素、或者单组件 动画
name
注意：transition 只支持单组件、单标签
mode属性什么时候加 在 条件渲染 时，可以使用 mode in-out out-in
多组件、多标签动画
transiton-group
tag：规定渲染的标签
name
组件生命周期（同样适用于实例）
组件生命周期概念：vue组件从创建到最后消亡整个过程
不同的生命周期vue提供不同的 钩子函数 来 监控不同生命周期阶段
beforeCreated 无法操作data 和methods 基本不用
created 调用时 已经可以操作data和调用methods中的自定义方法
会在此生命周期中 发送ajax 获取数据
mounted 渲染之后 在这个生命周期中可以获取 dom啦，页面中的一些效果 如页面滚动，页面效果
updated 数据更新
beforeDestory 组件还未销毁，dom还未移除
一般在这里 清空当前组件中 开启的定时器、window.onscroll
destoryed 有可能操作不了组件中的方法 或者获取不了组件的dom了
注意:一般不推荐在 生命周期的 钩子函数中 写过多逻辑代码 应该将逻辑代码写在 methods 自定义方法在中，在钩子函数中调用
当我们组件 使用keep-alive 缓存时，会导致 组件 生命周期钩子函数 无法 重新调用（压根就没有销毁），此时如果，我们组件从消失到显示（被缓存钩子函数不调用，导致无法重新发送数据请求，整个页面数据不更新），如果需要局部更新，
activated 页面活跃 周期
deactivated 组件不活跃
自定义指令
过滤器
{{}} 用于展示数据的 过滤器功能 展示之前 做一些过滤
全局
定义
Vue.filter("名字",function(v[,...arg]){
//v就是 要过滤的 state
return 值
});
局部
{
template:,
data:,
methods:,
filters:{
过滤器名字(v){
}
}
}
使用：
{{ state | 过滤器名字 }}
{{ state | 过滤器(参数) }}
扫一扫
5280
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
