我怎样才能只接受一个组件作为 vue 中的插槽
[英]How can I accept only one component as slot in vue
问题描述
我有一个按钮组组件，我希望该组件只接受我创建为插槽的按钮组件。
所以这是我的 ButtonGroup 组件：
<template>
<div class="button-group">
<slot />
</div>
</template>
<script lang="ts">
export default {
name: 'ButtonGroup',
components: {
Button,
},
};
</script>
如何只接受 Button 组件作为插槽？
2 条回复
1楼 wesbin 1 2023-01-25 07:35:54
使用渲染 function
<script>
import {h} from 'vue';
export default {
name: 'ButtonGroup',
render() {
const buttons = []
for (let defaultElement of this.$slots.default()) {
// case: <button />
if (defaultElement.type === 'button') {
buttons.push(defaultElement)
}
// other component
// if (defaultElement.type.name === 'Button') {
// buttons.push(defaultElement)
// }
}
return h('div', {class: 'button-group'}, buttons)
}
};
</script>
2楼 Kaushal Modi 0 2023-01-25 07:32:57
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div class="button-group">
<slot name="button">
<Button />
</slot>
</div>
</template>
<script>
export default {
name: 'ButtonGroup',
components: {
Button,
},
};
</script>
//Use of ButtonGroup component`enter code here`
<ButtonGroup>
<template #button />
</ButtonGroup>
问题未解决？试试以下方法：
如何强制 `vt` 指令（或 `v-text`）仅替换 `<slot /> ` 组件的一部分？
[英]How can I force the `v-t` directive (or `v-text`) to replace only the `<slot/>` part of a component?
组件如何在 Vue.js 的插槽内定义的组件上调用方法？
[英]How can a component call a method on a component defined within a slot in Vue.js?
Vue 2.6.0-如何使用新的插槽语法将插槽内容呈现给子组件的命名插槽
[英]Vue 2.6.0 - How to use the new slot syntax to render slot content to children component's named slot
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.