vue3个人心得---功能详解（八）插槽, props的强化版

DOM父传子的props方式很麻烦：1、先要把DOM以组件标签属性的形式放置在组件标签里，2、在子里通过defineExpose({})暴露传过来的DOM，3、在模版部通过标签的v-html属性或动态组件的方式引入父传过来的DOM。如下:
父组件:

子组件:

插槽方式传递DOM的强大：
如上使用则简单的多,如下:
父组件:

子组件:

插槽方式传递DOM的简单步骤：**1、DOM直接放置在组件里（不是标签属性），2、子组件中，在要放置父传过来的DOM位置子标识符即可。如上

• 优势一：插槽内容可以是任意合法的模板内容，不局限于文本。例如我们可以传入多个标签，甚至是组件。
• 优势二：更加灵活和具有可复用性（可以在子组件的不同的地方渲染各异的父内容，但同时还保证都具有父相同的样式）。
• 优势三：插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的。如上用props传递DOM就无法使用标签@click指令的函数"ed"，但方式就能够成功打印。
• 优势四：可设置缺省内容，当父组件没有传来DOM里，子组件可以设置缺省DOM，方法是把缺省DOM放在标签之间。如：缺省DOM，缺省DOM只有在父传值为空时才生效。

• 优势五：按需放置的 具名插槽 功能。有多个DOM要传给子，可以使用 v-slot 指令给要传的DOM具名，子组件就可以把不同具名的DOM按自已的需要放置在不同的位置上。如下：
  父组件：

  子组件：

  由上可见，随然在父中，插槽“rtr”在插槽“rt”前。但子组件将插槽“rtr”放置在插槽“rt”之后，实际显示将以子放置相同，插槽“rtr”放置在插槽“rt”之后。需要注意几点：
  一、v-slot：指令只能放在