vue中插槽的理解和使用

参考原文链接:https://www.cnblogs.com/mandy-dyf/p/11528505.html

什么是插槽

插槽是子组件提供给父组件使用的一个占位符,用,父组件可以在这个占位符中填充任何模板代码,如HTML,组件等,填充的内容会替换子组件中的slot标签

具名插槽

具名插槽就是为插槽命名,一个子组件中可以有多个插槽,父组件在填充内容时,可以根据名字将内容填充到对应的插槽中
子组件:
vue中插槽的理解和使用
父组件:
vue中插槽的理解和使用
显示:
vue中插槽的理解和使用

默认插槽

即没有name属性的插槽

  1. 父级的填充内容如果指定到子组件的没有对应名字插槽,那么该内容不会被填充到默认插槽中。
  2. 如果子组件没有默认插槽,而父级的填充内容指定到默认插槽中,那么该内容就“不会”填充到子组件的任何一个插槽中。
  3. 如果子组件有多个默认插槽,而父组件所有指定到默认插槽的填充内容,将“会” “全都”填充到子组件的每个默认插槽中。

作用域插槽

即带参数的插槽,子组件提供给父组件的参数,只能在插槽内使用
子组件:
vue中插槽的理解和使用
父组件:
vue中插槽的理解和使用
显示:
vue中插槽的理解和使用