用插槽和父传子写一个导航栏
时间: 2023-10-31 11:07:03 浏览: 32
好的,我来给您写一个Vue的示例代码:
// 父组件
<template>
<div>
<Navigation :items="navItems" />
</div>
</template>
<script>
import Navigation from './Navigation.vue'
export default {
components: {
Navigation,
},
data() {
return {
navItems: [
{
name: '首页',
link: '/',
},
{
name: '文章',
link: '/articles',
},
{
name: '关于',
link: '/about',
},
],
}
},
}
</script>
// 子组件 Navigation.vue
<template>
<div class="navigation">
<ul>
<li v-for="(item, index) in items" :key="index">
<a :href="item.link">{{ item.name }}</a>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
items: {
type: Array,
required: true,
},
},
}
</script>
在父组件中,我们将导航栏的选项作为一个数组传递给子组件 Navigation,子组件中通过 props 接收并渲染导航栏。这种方式可以让导航栏的选项更加灵活,可以在不同的页面中使用不同的选项。