vue (插槽slot &编写可复用组件)

前言及场景：

插槽概念在Vue中十分重要
在很多第三方的Vue模块或插件中都会大量使用插槽

作用：通过插槽slot可以更加方便的向子组件传递DOM元素，同时子组件使用插槽内容也十分简单，大大简化了代码，增加了代码可读性。

插槽slot

首先创建个基础组件，然后在页面调用显示，如下所示

父组件传递写法
父组件通过属性形式向子组件传值，即父传子借助props属性向下传值

如果不想被转义，接下来需要借助v-html即原始HTML指令编译代码

再次验证发现，此时便可以正常编译解析。
父组件传递写法缺点分析：
上述代码虽然可以解决问题，但缺点也很明显
缺点一：多余嵌套标签

缺点二：模板代码多时不简洁，过于累赘，不方便阅读

目前为止，如果想通过父组件传值方式，直接在组件里显示标题标签h2还无法实现，必须在外面包裹嵌套div标签，且传递内容较多时，代码难以阅读。

综上所述，当子组件部分内容是通过父组件传递DOM进行显示时，可以不用上述这种父组件props传值的比较挫的语法，Vue中提供了一种新型语法：插槽slot。

默认插槽案例：
接下来以插槽形式介绍下如何在父组件向子组件优雅传递DOM结构
修改上述案例，将代码修改如下所示