在Vue中,插槽是一种让父组件能够向子组件传递标记的方法。下面是如何使用插槽的例子:
- 子组件中定义插槽:
<!-- ChildComponent.vue -->
<template>
<div>
<h1>我是子组件的标题</h1>
<!-- 定义一个名为default的插槽 -->
<slot>如果没有传入内容,这里是默认插槽内容</slot>
</div>
</template>
- 父组件中使用子组件,并填充插槽:
<!-- ParentComponent.vue -->
<template>
<div>
<child-component>
<!-- 这里是插槽的内容 -->
<p>这是父组件传递给子组件的内容</p>
</child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
}
}
</script>
在这个例子中,标签代表了一个插槽的位置,当父组件使用时,可以通过插槽插入任何模板或组件。如果父组件没有提供内容,则会显示默认插槽中的内容。
内容来源于百度AI