vue+element点击顶部栏侧边栏内容改变
时间: 2023-10-06 20:04:55 浏览: 53
可以通过以下步骤实现:
1. 在顶部栏组件中添加点击事件,触发事件时将需要改变的内容传递给父组件。
2. 在父组件中监听顶部栏组件的点击事件,根据传递的内容改变侧边栏组件的内容。
3. 在侧边栏组件中添加监听事件,当内容改变时更新组件内容。
示例代码:
// 顶部栏组件
<template>
<div @click="handleClick('content1')">Content 1</div>
<div @click="handleClick('content2')">Content 2</div>
</template>
<script>
export default {
methods: {
handleClick(content) {
this.$emit('change-content', content)
}
}
}
</script>
// 父组件
<template>
<div>
<top-bar @change-content="handleChangeContent"></top-bar>
<side-bar :content="currentContent"></side-bar>
</div>
</template>
<script>
import TopBar from './TopBar.vue'
import SideBar from './SideBar.vue'
export default {
components: {
TopBar,
SideBar
},
data() {
return {
currentContent: 'content1'
}
},
methods: {
handleChangeContent(content) {
this.currentContent = content
}
}
}
</script>
// 侧边栏组件
<template>
<div>{{content}}</div>
</template>
<script>
export default {
props: ['content']
}
</script>