第一个使用 Vue3 的项目，尝试确定指定插槽是否具有给定页面上提供的内容。
在我的模板中我有这个：
<div
:class="{ 'py-20': hasTopContent }"
>
<slot name="top-content" />
</div>
在我的代码中，我有以下内容：
setup (_, { slots }) {
const hasTopContent = computed((slots) => {
console.log(slots.topContent);
return slots.topContent && slots.topContent().length;
});
return {
hasTopContent
}
}
以上console.log是返回TypeError: Cannot read properties of undefined (reading 'topContent')。我错过了什么？谢谢！
var Main = {\n components: {\n \'my-component\': MyComponent,\n },\n data() {\n return {\n }\n },\n methods: {\n }\n};\nconst app = Vue.createApp(Main);\napp.mount("#app")<html>\n<head>\n<style>\n .my-component {\n background-color: #fafafa; \n padding: 5px 20px 20px 20px;\n }\n</style>\n</head>\n<body>\n<div id="app">\n <h3>With top slot</h3>\n <my-component class=\'my-component\'>\n <template v-slot:top>\n <h4>Top Slot</h4>\n </template>\n </my-component>\n <h3>Without top slot</h3>\n <my-component class=\'my-component\'>\n </my-component>\n <hr style=\'padding: 20px 20px 20px 20px;\' />\n</div>\n<script src="//unpkg.com/vue@next"></script>\n<script type="text/x-template" id="my-component">\n<div\n :class="{ \'py-20\': hasTopContent }">\n <slot name="top" />\n hasTopContent: {{hasTopContent}}\n</div>\n</script>\n<script type="text/javascript"> \n var MyComponent = { \n template: \'#my-component\',\n setup(_, { slots }) {\n const hasTopContent = Vue.computed(() => {\n return slots.top && slots.top().length > 0;\n });\n return { hasTopContent }\n }\n }\n</script>\n</body>\n</html>| 归档时间： |
|
| 查看次数： |
4097 次 |
| 最近记录： |