作用域插槽的原理和例子
时间: 2024-10-10 11:09:13 浏览: 19
作用域插槽是Vue.js中的一个强大特性,它允许子组件与父组件之间通过特定的标签(slot)进行数据通信和行为传递。它的原理在于,父组件可以定义一个特殊的slot,并给它起一个名字,然后在子组件内部使用这个名字引用并处理该slot的内容。
例如,假设我们有一个`CustomCard`父组件,它接受一个标题和一些内容作为props,还有一个用于自定义头部的`header-slot` slot:
```html
<template>
<div class="custom-card">
<slot name="header-slot">默认头</slot>
<h2>{{ title }}</h2>
<p>{{ content }}</p>
</div>
</template>
<script>
export default {
props: {
title: String,
content: String
}
}
</script>
```
而在子组件`MyCard`中,我们可以利用这个插槽来动态改变头部:
```html
<template>
<custom-card>
<!-- 使用 `v-bind:` 绑定属性到插槽 -->
<template v-slot:header-slot>
<h1>自定义标题</h1>
</template>
</custom-card>
</template>
```
在这个例子中,当`MyCard`渲染时,它会覆盖掉`CustomCard`的默认头部。这种机制使得子组件可以根据需要自由地定制其外观或行为。
阅读全文