Vue07/Vue插槽介绍、默认插槽、插槽后备内容(默认值)

一.Vue插槽介绍:

     插槽就是子组件中提供给父组件使用的一个占位符 ， 用<slot> </slot> 表示 ， 父组件可以在这个占位符中填充任何模板代码 如HTML 组件等 填充的内容会替换子组件的 <slot> </slot> 标签 简单理解就是子组件中留下个'坑' 父组件可以使用指定内容来补'坑' 

插槽作用: 用于实现组件的内容分发 通过slot 标签 可以接收到写在组件标签内的内容

二. 默认插槽

语法:

父组件

<子组件>
  <p>这里是slot 默认内容</p>

</子组件>

 子组件

<slot> <slot>

 作用: 当组件内某一部分标签不确定，想要自定义就用 插槽 slot技术

 注意: 插槽使用步骤 1.先在组件内用slot占位 2.使用组件时，传入具体标签插入

三.插槽后备内容(默认值)

语法:

父组件

<子组件>  </子组件>

 子组件

<slot> 这里是插槽后备内容 <slot>

作用: 如果组件的使用者没有为插槽提供任何内容 ，则后备内容会生效

注意:

1.设置默认值 在slot标签内 写好后备内容

2. 什么时候插槽后备内容显示,当使用组件并未给我们传入具体标签或内容时