Vue3亲身体验---功能详解（八）slot-slot-，props加强版

DOM父子传递props的方式很麻烦：1.首先以组件标签的形式放置DOM组件标签中的属性2.在子组件中暴露通过defineExpose({})传入的DOM，3.在模板部分通过标签或动态组件的v-html属性引入父组件传入的DOM。如下：父组件：子组件：插槽传递DOM的强大功能：使用更简单如上，如下：父组件：子组件：slotDOM的简单步骤：**1.DOM直接放在组件中（不是label属性),2.在子组件中,在只需放置从父级传递的DOM位置的子标识符。优势1：slot的内容可以是任何合法的模板内容，不限于文字。比如我们可以传入多个标签，甚至是组件。优势二：更灵活，可复用（不同的父级内容可以在子组件的不同地方渲染，但同时保证与父级的样式相同）。优势三：插槽内容可以访问父组件的数据范围，因为插槽内容本身是在父组件模板中定义的。如果像上面这样通过props传递DOM，则不能使用标签@click指令的函数“ed”，但是方法可以打印成功。优势四：可以设置默认内容。当父组件不传递DOM时，子组件可以通过将默认DOM放在标签之间来设置默认DOM。例如：DefaultDOM，默认DOM只在父值为空时生效。优势五：namedslot函数按需放置。如果有多个DOM要传递给子组件，可以使用v-slot命令对要传递的DOM进行命名，子组件可以根据自己的需要将不同命名的DOM放置在不同的位置。如下：父组件：我在前面子组件：从上面可以看出，然后在父级中，槽“rtr”在槽“rt”之前。但是子组件将插槽“rtr”放在插槽“rt”之后，实际显示将与子组件相同，插槽“rtr”放在插槽“rt”之后。使用namedslots有几点需要注意：1.v-slot只能放在我在前面子组件：5.隐式命名的slot子组件标签中的所有顶级标签（子组件：从上面的例子我们可以看出即使标签分散在组件的不同位置，它们也会被组合在一起。子组件：七、slotchild可以传同名给parent，而slotchild可以传递给parent的数据只有在同名的这个槽中才有，如下<模板#wo>子组件：子组件：这个网页会显示两个按钮，两个按钮的因数槽传来的值不同，就会有不同的显示。九、没有逻辑组件和没有渲染组件slotchildparent会导致父组件不需要逻辑部分处理数据，只专注于展示DOM，而子组件不需要模板部分展示DOM，只专注于处理数据。这个父组件可以称为无逻辑组件，子组件可以称为无渲染组件。虽然这种模式很方便，但大多数可以通过无渲染组件实现的功能可以通过组合API以另一种更有效的方式实现，而不会产生额外的组件嵌套开销。