英文:
respective contents of each named slot do not show up
问题
关于此链接，我试图实现与该链接中提供的示例相同的内容。对于下面发布的代码，尽管我在BaseLayer_0.vue中为每个插槽分配了名称，但使用v-slot或#绑定到每个命名插槽的内容却不起作用，而是得到如下图部分所示的输出。
请告诉我我做错了什么，以致我无法看到各个插槽的内容。
App:
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<BaseLayer_0>
<template #header>
<h1>header</h1>
</template>
<template #default>
<p>default</p>
</template>
<template #footer>
<p>footer</p>
</template>
</BaseLayer_0>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import BaseLayer_0 from './components/BaseLayer_0.vue'
export default {
name: 'App',
components: {
HelloWorld,
BaseLayer_0
}
}
</script>
BaseLayer_0:
<template>
<div class="container">
<header name="header">
<slot></slot>
</header>
<main>
<slot></slot>
</main>
<footer name="footer">
<slot></slot>
</footer>
</div>
</template>
<script>
export default {
name: 'BaseLayer_0',
}
</script>
image:
英文:
Referring to this link , i am trying to implement the same example provided in the url.
for the below posted code, despite i assigned names to each slot as shown in BaseLayer_0.vue,the content bound to each named slot using v-slot or # does not work, and instead i receive the output shown in the image section below.
please let me know what have i done wrong so that i am not able to see contents of each slot respectively
App:
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<BaseLayer_0>
<template #header>
<h1>header</h1>
</template>
<template #default>
<p>default</p>
</template>
<template #footer>
<p>footer</p>
</template>
</BaseLayer_0>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import BaseLayer_0 from './components/BaseLayer_0.vue'
export default {
name: 'App',
components: {
HelloWorld,
BaseLayer_0
}
}
</script>
BaseLayer_0
<template>
<div class="container">
<header name="header">
<slot></slot>
</header>
<main>
<slot></slot>
</main>
<footer name="footer">
<slot></slot>
</footer>
</div>
</template>
<script>
export default {
name: 'BaseLayer_0',
}
</script>
image:
答案1
得分: 0
你应该将 name 属性添加到 <slot> 标签，而不是 <header>。
例如：
#BaseLayer_0.vue
<header>
<slot name="header">
</header>
英文:
You should add the name attribute to the <slot> tag, not to <header>.
For example:
#BaseLayer_0.vue
<header>
<slot name="header">
</header>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论