vue插槽的实例详解

文章目录

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

默认插槽 

定义：没有指定名称的插槽，用于接收父组件传递的未明确指定插槽名称的内容。

用法：在子组件中使用<slot></slot>定义默认插槽的位置，父组件中直接放在子组件标签内的内容会被渲染到该位置。

  子组件：        

<template><div class="child"><h2>我是子组件的标题</h2><!-- 默认插槽 --><slot></slot></div>
</template>

   父组件：

<template><div><DefaultSlotChild><!-- 这里的内容会被渲染到子组件的默认插槽中 --><p>这是来自父组件的默认插槽内容</p></DefaultSlotChild></div>
</template><script>
import DefaultSlotChild from '引入路径';export default {components: {DefaultSlotChild}
}
</script>

最终效果：

<template><div> <template><div class="child">  <h2>我是子组件的标题</h2>  <!-- 这里的内容会被渲染到子组件的默认插槽中 -->  <p>这是来自父组件的默认插槽内容。111</p><p>这是来自父组件的默认插槽内容。222</p></div> </template> </div>
</template>

具名插槽：

定义：带有名称的插槽，用于接收父组件中明确指定插槽名称的内容。
用法：在子组件中使用<slot name="插槽名称"></slot>定义具名插槽，父组件中通过<template v-slot:插槽名称>或简写为<template #插槽名称>来指定内容应该插入哪个具名插槽。

子组件：

<template><div class="child"><header><!-- 具名插槽：header --><slot name="header"></slot> </header><footer><!-- 具名插槽：footer --><slot name="footer"></slot> </footer></div>
</template>

父组件：

<template><子组件><template v-slot:header><!-- 这里的内容会被渲染到子组件的header插槽中 --><h1>这是标题</h1></template><template v-slot:footer><!-- 这里的内容会被渲染到子组件的footer插槽中 --><p>这是页脚</p></template></子组件>
</template><script>
import 子组件 from '子组件路径';export default {components: {子组件}
}
</script>

作用域插槽：

定义：一种特殊的插槽，允许子组件将数据暴露给父组件的插槽内容。
用法：在子组件中，通过<slot :数据名="数据值"></slot>将数据传递给插槽；
在父组件中，通过<template v-slot:插槽名称="slotProps">接收数据，并使用slotProps来访问传递过来的数据。

子组件：

<template><ul><li v-for="item in items" :key="item.id"><slot name="item" :item="item">{{ item.text }}</slot></li></ul>
</template><script>
export default {data() {return {items: [{ id: 1, text: '值1' },{ id: 2, text: '值2' },{ id: 3, text: '值3' }]}}
}
</script>

 父组件：

<template><子组件><template v-slot:item="slotProps"><!-- 使用slotProps访问子组件传递的数据 --><strong>{{ slotProps.item.text }}</strong></template></子组件>
</template><script>
import 子组件 from './子组件路径';export default {components: {子组件}
}
</script>

动态插槽：

定义：允许插槽的名称是动态的，根据组件的状态或其他条件来决定使用哪个插槽。

用法：在父组件中，通过:slot="动态名称"来绑定插槽的名称，其中动态名称可以是一个计算属性、方法返回值或数据属性。

子组件：

<template><div class="child"><header><!-- 具名插槽：header --><slot name="header"></slot> </header><main><!-- 默认插槽 --><slot></slot> </main><footer><!-- 具名插槽：footer --><slot name="footer"></slot> </footer></div>
</template>

父组件： 

<template>  <div>  <子组件>  <!-- 使用计算属性dynamicSlotName来决定内容应该渲染到哪个插槽中 -->  <template v-slot:[dynamicSlotName]>  <p>这是根据条件动态插入到对应插槽的内容。</p>  </template>  </子组件>  </div>  
</template>  <script>  
import 子组件 from './子组件';  export default {  components: {  子组件  },  computed: {  // 假设这里根据某个条件返回不同的插槽名  例如：根据某个数据属性来决定 dynamicSlotName() {  const someCondition = true; // 实际应用中这里可能是更复杂的逻辑或响应式数据  if (someCondition) {  return 'header';  } else {  return 'footer';  }  }  }  
}  
</script>

插槽后备内容：

定义：当父组件没有为插槽提供内容时，子组件可以定义一些后备内容作为默认显示。

用法：在子组件的<slot>标签内部直接放置的内容，如果父组件没有为该插槽提供内容，则显示这些后备内容。

子组件：

<template>  <div>  <slot>  <!-- 后备内容：如果没有提供插槽内容，则显示这个 -->  <p>如果没有提供内容，将显示这段后备文本。</p>  </slot>  </div>  
</template>

父组件： 

<template>  <div>  <!-- 提供了插槽内容，所以后备内容不会显示 -->  <子组件名称>  <p>这是来自父组件的插槽内容。</p>  </子组件名称>  <!-- 没有提供插槽内容，将显示后备内容，也就是默认内容 -->  <子组件名称></子组件名称>  </div>  
</template>  <script>  
import 子组件名称 from './子组件名称.vue';  export default {  components: {  子组件名称  }  
}  
</script>