基本插槽
父组件
<template>
<div>
<my-component>
<!-- 在父组件中插入内容 -->
<p>这是插槽的内容</p>
</my-component>
</div>
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
components: {
MyComponent
}
};
</script>
子组件
<template>
<div>
<h2>子组件</h2>
<!-- 使用插槽 -->
<slot></slot>
</div>
</template>
在子组件中，使用 <slot></slot> 来定义插槽的位置。
具名插槽
具名插槽允许你在父组件中指定插槽内容放置的位置。
父组件
<template>
<div>
<my-component>
<!-- 使用具名插槽 -->
<template v-slot:header>
<h1>这是头部插槽的内容</h1>
</template>
<template v-slot:footer>
<p>这是底部插槽的内容</p>
</template>
</my-component>
</div>
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
components: {
MyComponent
}
};
</script>
子组件
<template>
<div>
<h2>子组件</h2>
<!-- 使用具名插槽 -->
<slot name="header"></slot>
<div>
<!-- 默认插槽 -->
<slot></slot>
</div>
<slot name="footer"></slot>
</div>
</template>
在父组件中，使用 <template v-slot:slotName> 来定义具名插槽。
作用域插槽
作用域插槽允许父组件在插入内容的同时传递数据给子组件。
父组件
<template>
<div>
<my-component>
<!-- 使用作用域插槽 -->
<template v-slot:default="slotProps">
<p>父组件中的数据：{{ slotProps.parentData }}</p>
</template>
</my-component>
</div>
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
components: {
MyComponent
}
};
</script>
子组件
<template>
<div>
<h2>子组件</h2>
<!-- 使用作用域插槽 -->
<slot :parentData="dataFromParent"></slot>
</div>
</template>
<script>
export default {
data() {
return {
dataFromParent: '这是来自父组件的数据'
};
}
};
</script>
在父组件中，使用 <template v-slot:default="slotProps"> 定义作用域插槽，然后通过 slotProps 访问子组件中的数据。
这些是 Vue 3.0 中插槽的基本使用方式。插槽是 Vue 组件中非常强大和灵活的特性，可以帮助你更好地组织和复用组件。
转载请注明出处：http://www.zyzy.cn/article/detail/496/Vue 3.0