Vue总复习

v-if和v-show的区别

v-if在dom层面控制元素的显示和隐藏，性能消耗比较大，适用于一次性修改控制元素的显示和隐藏

v-show会渲染元素的dom节点，只是通过控制元素的display属性来控制元素的显示和隐藏，适用于频繁切换元素的显示与隐藏的情况

Vue父子组件的通信方式

父组件向子组件传递数据

<子组件  :属性="xxx(父传子的数据)">

通过this.props.xxx获得数据

子组件向父组件传递数据

<子组件 @xxx=function ABC（yyy数据）/>

this.$emit(xxx,yyy数据);

function ABC（yyy）={
   console.log(yyy);
}

兄弟组件之间数据通信

兄： event.$emit('自定义事件',yyy(要传递的数据));
弟： event.$on('自定义事件',function(要传递的数据))

refs

refs可以用来调用元素

<div ref="xxx"></div>

const mydiv=this.$refs.xxx;

slot

slot是一个插槽，用于将父组件的内容显示到子组件上

<父组件>
<子组件>
{{父组件传递给子组件的值}}
</子组件>
</父组件>

<子组件>
<slot>
显示父组件传递给子组件的值
</slot>
</子组件>

作用域插槽

<父组件>
<子组件>
<template v-slot="mySlot">
{{mySlot.soltData}}
</template>
</子组件>
</父组件>

//子组件中的代码
<slot:soltData="子组件data中的数据">
</slot>