Vue2插槽

Vue2插槽

下面为你详细介绍 Vue 2 里默认插槽和命名插槽的使用方法，包含子组件与父组件代码的编写方式。

默认插槽

默认插槽用于在子组件里预留一个位置，方便父组件插入内容。

子组件代码（Child.vue）

<template><div><h2>子组件</h2><!-- 默认插槽 --><slot></slot></div>
</template><script>
export default {name: 'Child'
}
</script>

父组件代码（Parent.vue）

<template><div><h1>父组件</h1><Child><!-- 插入到子组件的默认插槽 --><p>这是插入到子组件默认插槽的内容</p></Child></div>
</template><script>
import Child from './Child.vue'export default {name: 'Parent',components: {Child}
}
</script>

命名插槽

命名插槽允许在子组件中设置多个插槽，父组件可以依据插槽名称往特定插槽插入内容。

子组件代码（ChildNamed.vue）

<template><div><h2>带命名插槽的子组件</h2><!-- 命名插槽 --><slot name="header"></slot><p>子组件的主体内容</p><slot name="footer"></slot></div>
</template><script>
export default {name: 'ChildNamed'
}
</script>

父组件代码（ParentNamed.vue）

<template><div><h1>使用命名插槽的父组件</h1><ChildNamed><!-- 插入到子组件的 header 插槽 --><template #header><h3>这是插入到子组件 header 插槽的内容</h3></template><!-- 插入到子组件的 footer 插槽 --><template #footer><p>这是插入到子组件 footer 插槽的内容</p></template></ChildNamed></div>
</template><script>
import ChildNamed from './ChildNamed.vue'export default {name: 'ParentNamed',components: {ChildNamed}
}
</script>

代码解释

• 默认插槽：子组件里使用 <slot></slot> 定义默认插槽，父组件在使用子组件时，直接在子组件标签内插入内容，这些内容就会显示在默认插槽的位置。
• 命名插槽：子组件通过 name 属性定义命名插槽，像 <slot name="header"></slot>。父组件借助 <template #插槽名> 语法把内容插入到对应的命名插槽。

这些示例代码能够让你清晰地理解 Vue 2 中默认插槽和命名插槽的用法。你可以依据实际需求对代码进行调整和扩展。