对单向数据流的理解?
当父组件给子组件传递数据的时候,子组件只允许进行接收,不能够进行修改,因为数据是单向流动的
如果子组件修改了父组件的信息后,可能会导致其他组件也发生一些莫名的错误,导致你的错误无法捕获
为什么组件中的data是一个函数而不是一个对象?
因为每个组件执行的时候都会返回一个对象,如果data是一个对象的情况下,这个对象就可能会进行复用(对象是引用数据类型),但是如果是一个函数的情况下,那么就是以每次返回一个新的对象,保证每个组件都有一份独立的对象(状态)
如何使每个组件都拥有 自己独立的css作用域?
在style标签身上添加一个属性scoped
动态组件:
应用:不涉及路径变化时可使用
解释:多个组件通过同一个挂载点进行切换展示 通过is属性动态来改变组件
通过一个内置组件<component></component>以及这个组件的属性is来进行实现的
keep-alive:用来包裹动态切换的页面或组件(内置组件 系统自带,不会被渲染到页面)
作用:凡是用keep-alive包裹的组件,不会被二次销毁,而是进行了一个缓存(性能提升)
keep-alive组件身上会有以下这几个常用属性
1.include:
值:字符串 正则表达式
作用:指定哪些组件被缓存
多个组件名之间用逗号隔开
2.exclude
值:字符串 正则表达式
作用:排除哪些组件被缓存
max:
作用:最大可以缓存多少个组件
凡是使用了keep-alive包裹的组件都会多两个生命周期函数
activated() 活跃状态
当组件被切换显示的时候会进入活跃状态的生命周期
应用:下拉刷新
deacticated() 缓存状态
当组件被切换隐藏的时候会进入缓存状态的生命周期
slot插槽
正常情况下组件当做标签使用的时候,组件标签内部嵌套的元素是不会显示的,如果需要进行显示,则需要使用插槽
如何使用(匿名插槽) default
1.在组件标签内部书写一个template标签,标签添加一个指令 v-slot
2.讲需要做嵌套的内部放在template标签内部
3,在组件内部通过<slot></slot>进行接受
命名插槽 具名插槽
1、在组件标签内部书写一个template标签 标签添加一个指令 v-slot:插槽的名称
2.将需要做嵌套的内部放在template标签内部
3、在组件内部通过<slot name='插槽的名称'></slot>进行接受
作用域插槽
带参数的插件
一.数据的子传父
1、在组件内部通过<slot name='插槽的名称' :自定义属性="需要传递的值"></slot>绑定一个自定义属性 值为需要传递的数据
2、在组件标签内部书写一个template标签 标签添加一个指令 v-slot:插槽的名称="需要接收的这个对象"
3、在template内部的标签上进行数据的渲染 {{需要接收的这个对象.自定义属性}}
Vue动画
1.如果需要使用vue动画,那么需要变动的元素外层必须加一个内置组件<transition></transition>
2.需要进行动画的元素必须经历隐藏和显示 v-if v-show
动画的类名
name就是动画的名称 template会有一个属性name name的值就是动画的名称进入的类名
<name>-enter
<name>-enter-active
<name>-enter-to
离开的类名
<name>-leave
<name>-leave-active
<name>-leave-to
当多个元素需要相同的动画的时候 需要将transition 换成 transition-group另外需要给每一个元素添加一个不同的key值
animate.css
当你使用了第三方的css动画库的时候可以直接将动画的名称通过以下方式赋值给tranisition
<transition
enter-class=""
enter-active-class=""
enter-to-class=""
leave-class=""
leave-active-class=""
leave-to-class=""
>
<div class="box" v-if="show" ></div>
</transition>