vue插槽（三）
原创
插槽的默认内容
有时，我们可能希望为插槽提供默认的内容，以便在使用组件时，如果没有提供插槽内容，将显示默认内容。我们可以使用v-slot指令的简写形式来实现这一点。
下面是一个示例，展示了如何为插槽提供默认内容：
<template>
<div>
<h1>Parent Component</h1>
<slot name="header">
<h2>Default header</h2>
</slot>
</div>
</template>在上面的示例中，我们在<slot>元素中定义了默认内容，当使用组件时，如果没有提供header插槽的内容，将显示默认的<h2>元素。
使用示例：
<template>
<div>
<parent-component>
<template v-slot:header>
<h2>Custom header</h2>
</template>
</parent-component>
<parent-component>
<!-- 没有提供header插槽的内容，将显示默认的<h2>元素 -->
</parent-component>
</div>
</template>
<script>
import ParentComponent from './ParentComponent.vue';
export default {
components: {
ParentComponent
}
};
</script>在上面的示例中，我们在一个<parent-component>中提供了自定义的header插槽内容，而在另一个<parent-component>中没有提供header插槽的内容，因此显示了默认的<h2>元素。
插槽的作用域
插槽中的内容可以访问组件中的数据和方法，这是因为插槽的内容在组件的作用域中运行。这意味着在插槽中可以访问组件中的数据、计算属性、方法等。
下面是一个示例，展示了如何在插槽中访问组件中的数据和方法：
<template>
<div>
<h1>Parent Component</h1>
<slot name="content"></slot>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello from parent component!'
};
},
methods: {
greet() {
console.log('Greeting from parent component!');
}
}
};
</script>在上面的示例中，我们在父组件中定义了一个数据message和一个方法greet()。在插槽中，可以访问到这些数据和方法。
使用示例：
<template>
<div>
<parent-component>
<template v-slot:content>
<p>{{ message }}</p>
<button @click="greet">Greet</button>
</template>
</parent-component>
</div>
</template>
<script>
import ParentComponent from './ParentComponent.vue';
export default {
components: {
ParentComponent
}
};
</script>在上面的示例中，插槽的内容包含了对父组件中的数据message的引用和对父组件中的方法greet()的调用。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录