如何用插槽和子传父写一个头部导航栏
时间: 2024-05-11 12:20:04 浏览: 14
可以按照以下步骤实现:
1. 首先,在父组件中创建一个插槽,用于放置导航栏组件。
2. 然后,在导航栏组件中,通过 props 将导航栏的数据传递给父组件。
3. 在父组件中,通过子传父的方式,将导航栏组件的数据传递给子组件。
4. 在子组件中,根据接收到的导航栏数据渲染导航栏。
下面是一个示例代码:
父组件:
```html
<template>
<div>
<header>
<slot name="navbar"></slot>
</header>
<main>
<router-view></router-view>
</main>
</div>
</template>
<script>
export default {
name: 'App',
components: {},
methods: {
handleNavbar(navbarData) {
console.log(navbarData);
},
},
};
</script>
```
在上面的代码中,我们创建了一个插槽 `<slot name="navbar"></slot>`,用于放置导航栏组件。同时,我们在父组件中定义了一个 `handleNavbar` 方法,用于接收导航栏组件传递的数据。
导航栏组件:
```html
<template>
<nav>
<ul>
<li v-for="(item, index) in navbarData" :key="index">{{ item }}</li>
</ul>
</nav>
</template>
<script>
export default {
name: 'Navbar',
props: {
navbarData: Array,
},
methods: {
handleClick() {
this.$emit('handle-navbar', this.navbarData);
},
},
};
</script>
```
在导航栏组件中,我们接收了一个 `navbarData` 的 props,用于接收父组件传递的导航栏数据。同时,我们定义了一个 `handleClick` 方法,用于触发父组件的 `handleNavbar` 方法,并将导航栏数据传递给父组件。
子组件:
```html
<template>
<div>
<Navbar :navbarData="navbarData" @handle-navbar="handleNavbar" />
</div>
</template>
<script>
import Navbar from './Navbar.vue';
export default {
name: 'Child',
components: {
Navbar,
},
data() {
return {
navbarData: ['Home', 'About', 'Contact'],
};
},
methods: {
handleNavbar(navbarData) {
console.log(navbarData);
},
},
};
</script>
```
在子组件中,我们引入了导航栏组件,并通过 props 将导航栏数据传递给导航栏组件。同时,我们定义了一个 `handleNavbar` 方法,用于接收导航栏组件传递的数据。在 `Navbar` 组件中,我们通过 `$emit` 方法触发了父组件的 `handleNavbar` 方法,并将导航栏数据传递给父组件。
这样,我们就通过插槽和子传父的方式实现了一个头部导航栏。