下面是一个完整的示例,展示如何在Vue中使用插槽:
<template>
<div>
<h2>这是父组件</h2>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'ParentComponent'
};
</script>
在上面的示例中,我们定义了一个名为 ParentComponent
的父组件,并在模板中使用了 <slot>
标签来指定插槽的位置。<slot></slot>
表示插槽的起始和结束。
接下来,我们可以在父组件的使用者中添加内容来填充插槽。例如,假设我们在父组件的使用者中编写以下代码:
<template>
<div>
<parent-component>
<h3>这是插入到插槽中的标题</h3>
<p>这是插入到插槽中的段落</p>
</parent-component>
</div>
</template>
<script>
import ParentComponent from './ParentComponent.vue';
export default {
components: {
ParentComponent
}
};
</script>
在上面的代码中,我们在父组件 <parent-component>
标签的内部添加了一个 <h3>
标题和一个 <p>
段落。这些内容将填充父组件中的插槽。
当我们运行这个Vue应用时,父组件将会展示如下的内容:
<div>
<h2>这是父组件</h2>
<h3>这是插入到插槽中的标题</h3>
<p>这是插入到插槽中的段落</p>
</div>
通过使用插槽,我们可以在父组件的使用者中动态添加内容,使得父组件更加灵活和可定制。