一、使用v-bind='$props'和v-bind='$attrs'进行数据的透传

开发过程中，有时会遇到这种需求：嵌套组件的数据传递，比如A组件是B组件的父组件，B组件是C组件的父组件，此时需要将某个数据从A组件传递给C组件。

对于这种需求我们常见的做法是将通过props进行一层一层的传递，但是实际上可使用v-bind="$props"来将自己接收的所有数据传给子组件，子组件需要在props里定义需要用到的数据。

父组件 子组件 孙子组件

当孙子组件没有定义props时，如何传递数据？

调用一个组件时，传入属性，并且内部没有定义props时，使用v-bind='$attrs'传入该组件的内部组件

除了使用v-bind进行数据传递外，也可使用 provide + inject 进行数据的传递

二、动态组件

基本用法：<component is='组件名' />

动态组件

点击按钮时会切换组件，过程为销毁现在的组件，加载另一个组件；可使用<keep-alive></keep-alive>包裹动态组件来缓存组件，不在切换时销毁和加载组件，可优化性能

v-if、v-show、v-once和动态组件

v-if和动态组件原理类似，v-if通过判断条件来销毁和加载组件；动态组件的切换过程也是销毁个加载组件。浏览器中表现为 代码 和 <!---代码---!>。

v-show并不会销毁组件，只是对组件display的none和block的切换，v-show不支持在template中使用

v-once是只对组件进行一次加载，加载后，组件中的要用的数据更新后组件并不会更新

v-if结合v-once实际上也能达到v-show的效果

三、v-cloak的使用

vue中{{}}和v-text、v-html都可以渲染普通文本

{{}}会出现闪烁问题，即当网络延迟比较大，{{}}中的变量还没有拿到值时，不会渲染变量，就会出现闪烁问题

解决方法一是可以使用v-text或v-html来渲染，但两者都会覆盖掉元素的整个内容（{{}}只会覆盖自己这个占位符）

另一个方法就是使用v-cloak，可在style中定义[v-cloak]为display:none，即可让变量拿到值前不展示数据

使用v-cloak style中定义v-cloak

四、props校验

props除了可以校验传过来的参数类型外，可使用require:true设置必填项，还可自定义校验规则。

子组件自定义props校验 校验不通过时控制台发出警告

五、调试template

有时当我们的template中的变量报错时，我们可以打印该变量来进行调试

首先在全局自定义方法$log，

main.js

然后在模板中直接使用即可将数据打印在控制台

组件 组件 打印结果

六、特殊变量$event

该变量是当前触发的事件，一般用于DOM的回调函数中。

在vue中子组件向父组件传值时，父组件也会使用$event来接受这个值

七、函数式组件（vue2）

特点：

1.无状态 

2.无法实例化

3.内部没有任何生命周期处理函数

4.轻量,渲染性能高,适合只依赖于外部数据传递而变化的组件(展示组件，无逻辑和状态修改)

5..在template标签里标明functional

6.只接受props值

7.不需要script标签

由于函数式组件在vue2中对性能的提升确实不小，但是在vue3中组件的优化让组件整体性能都提升了，而函数式组件的性能提升效果边显得微乎其微，所以vue3中取消了functional。在 Vue 3 中，只要是通过普通函数创建的组件，都是函数式组件。

八、v-pre和v-once

带有v-pre指令的标签内不进行编译，即代码是什么就展示什么（也就是{{变量}}会展示原本的样子，不会将变量编译）

v-once即只编译一次，之后的编译都会被当做静态资源跳过