5-5 5.8.4具名插槽ppt课件 Vue.js基础与应用开发实战（微课版）.pptx

5-5 5.8.4 具名插槽教学课件 Vue.js 基础与应用开发实战（微课版）5.8.4 具名插槽1插槽的具名方式有时我们需要多个插槽，例如对于一个带有如下模板的基本布局组件：对于这样的情况，元素有一个特殊的属性：name，这个属性可以用来定义多个的插槽，可以为每个插槽指定不同的name名称。这种带有具体名称的插槽叫做“具名插槽”。例如：其中有一个没有指定name名称的插槽，会带有隐含的名称叫做“default”。2混用具名插槽与默认值插槽可以使用name属性来配置如何分发内容，多个slot可以有不同的名字。具名slot将匹配父组件的内容片段中有对应slot属性的元素，对于父组件中没有对应slot属性的元素，则取其默认值。【实例5-13】混用具名插槽与匿名插槽【操作要求】编写程序实现以下功能：（1）子组件中的具名slot匹配父组件的内容片段中有对应slot属性的元素。（2）父组件中没有对应slot属性的元素，则匹配子组件中的匿名slot。（3）父组件中有slot属性的元素，如果子组件中没有配置对应slot属性的元素，则被抛弃。【实现过程】创建网页0513.html，在该文件中编写代码实现要求的功能。扫描二维码查看【电子活页5-33】中网页0513.html的代码或者从本单元配套的教学资源中打开对应的文档查看相应内容。HTML将被渲染为如下所示。【实现过程】父组件 子组件 主体更新内容 其他新增内容 上 述 代 码 中，插 入 中，其他新增内容插入中，而和被丢弃如果没有默认的slot，这些找不到匹配的内容片段也将被抛弃。【示例】：demo050806.html扫 描 二 维 码 查 看【电 子 活 页 5-34】中 网 页demo050806.html的代码或者从本单元配套的教学资源中打开对应的文档查看相应内容。【示例】：demo050806.htmlHTML将被渲染为如下所示。父组件 子组件 主体更新内容 上 述 代 码 中，、其 他 新 增 内 容 和 尾部更新内容都被抛弃。4为具名插槽提供内容在 向 具 名 插 槽 提 供 内 容 的 时 候，我 们 可 以 在 一 个 元素上使用v-slot指令，并以v-slot 的参数的形式提供其名称。示例代码如下：页面标题 段落内容 联系方式 现在元素中的所有内容都将会被传入相应的插槽，任何没有被包裹在带有v-slot的中的内容都会被视为默认插槽的内容。然 而，如 果 希 望 更 明 确 一 些，仍 然 可 以 在 一 个中包裹默认插槽的内容。例如：页面标题 段落内容 联系方式【注意】：v-slot只能添加在上和组件上，因为组件的最外层也是template。父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。这是vue的编译原则，也就是说，在父组件中使用子组件，向子组件插槽中编写内容时，插件里面的是无法访问到子组件的数据。5具名插槽的简写形式跟v-on、v-bind一样，v-slot也有缩写形式，即把参数之前的所有内容（v-slot:）替换为字符#。例如v-slot:header可以被重写为#header。例如：页面标题 段落内容 联系方式【实例5-14】应用作用域插槽实现组件定义如何渲染列表每一项【操作要求】作用域插槽更具代表性的用例是列表组件，编写程序应用作用域插槽实现组件定义如何渲染列表每一项。【实现过程】创建网页0514.html，在该文件中编写代码实现要求的功能。扫描二维码查看【电子活页5-36】中网页0514.html的代码或者从本单元配套的教学资源中打开对应的文档查看相应内容。HTML将被渲染为如下所示。【实现过程】父组件 第1段内容 第2段内容 第3段内容 快乐学习！高效学习！祝学习进步！