普通插槽和作用域插槽有什么区别?
先理解原理和示例,再练习完整口述与追问。
回答要点
父级提供内容;作用域插槽由子级把行数据、状态等暴露给父级的插槽内容。模板表达式仍遵守定义处的作用域规则。适合表格单元格、选择器选项和可定制空状态。
原理拆解
普通插槽让父组件决定内容,作用域插槽进一步让子组件把渲染所需的数据传回父提供的渲染函数。它解决“子掌握数据或交互状态,父决定如何展示”的问题。插槽内容仍主要在父级作用域解释;父不能凭空读取子私有数据,必须通过子声明的 slot props 取得。
示例与推演
表格组件遍历 rows,给每一格提供 row 与 index;父页面使用 <template v-slot:cell="{ row }"> 决定显示标签还是按钮。表格负责分页框架与行遍历,业务页面负责订单状态文本和操作按钮。插槽与 props 是互补关系,不必为了扩展展示就把整段 HTML 作为字符串传入。
易错点
不要混淆“插槽在哪个组件显示”和“表达式在哪个作用域解析”。Vue2.6 推荐 v-slot,旧 slot-scope 写法在存量项目可能存在,使用前明确编译器版本。
参考回答可直接练习口述
普通插槽让父组件决定子组件某个区域显示什么;作用域插槽进一步让子组件把当前行、选中状态等数据传给父级定义的插槽函数。例如表格负责遍历数据,父级决定每一行操作按钮的内容。插槽表达式主要在定义它的父级作用域求值,不能无条件直接访问子组件内部变量,需要子级显式暴露。
面试官可能继续问追问与完整解答展开收起
追问
子组件的数据如何在父级插槽模板中使用?Vue2.6 的 v-slot 与旧语法有什么关系?
追问回答
子组件通过插槽属性暴露数据,例如给 slot 传 row,父级用 v-slot 解构拿到 row。Vue2.6 引入 v-slot 统一默认、具名和作用域插槽用法;slot、slot-scope 等旧语法在相应版本中仍有兼容,但新代码应沿项目约定使用。