由于时间原因我先只把编写代码的顺序放在上面
以后有时间再写详细的Bug总结,其中碰到的缺陷就是使用reactive的时候数据双向绑定失败
主导航条: nav.vue 子组件A
<div class="navContainer">
<ul class="navList">
<li
v-for="(item, index) in navList"
:key="item.key"
@click="navClick(index, item.key)"
:class="navNo == index ? 'navActive' : ''"
>
<div class="navIcon">
<i class="icon icon-favicon-32x32"></i>
</div>
<p>{{ item.name }}</p>
</li>
</ul>
</div>
export default defineComponent({
setup(props, context) {
const navNo = ref(0);
const { navList } = navRander();
const navClick = (index, navName) => {
navNo.value = index;
console.log(navName);
const key = navName.slice(1);
context.emit('navClick', { key });
};
return {
navList,
navNo,
navClick,
};
},
components: {
Setting,
},
});
</script>
父组件获得数据:
Home.vue
<div class="home">
<oneNav @navClick="navClick"></oneNav>
<div class="displayMain">
<controlShow></controlShow>
<div class="contentArea">
<subNav :routerName="routerKey"></subNav>
<div class="content">
<router-view></router-view>
</div>
</div>
</div>
</div>
export default {
setup(_, ctx) {
// const routerKey = ref('Homepage');
const routerKey = ref('Homepage');
const navClick = (param) => {
console.log(param.key);
routerKey.value = param.key;
};
return {
routerKey,
navClick,
};
},
components: {
oneNav,
controlShow,
subNav,
},
};
子组件B:
subNav.vue
<div class="subNav">
<div class="subNavTitle">
<span>
{{ subNavList.title }}
</span>
</div>
<ul class="subNavSubTitle">
<li
v-for="(item, index) in subNavList.children"
:key="item.id"
@click="subNavNo = index"
:class="subNavNo == index ? 'subNavActive' : ''"
>
<div class="navIcon">
<i class="icon icon-favicon-32x32"></i>
</div>
<p>{{ item.name }}</p>
</li>
</ul>
</div>
import { toRefs, reactive, ref, watch, defineComponent } from 'vue';
import subNavData from '../../../assets/config/subNav';
export default defineComponent({
props: {
routerName: String,
},
setup(props) {
// 二级导航条的编号
const subNavNo = ref(null);
const { routerName } = toRefs(props);
const key = routerName.value;
const subNavList = reactive({
title: subNavData[key].title,
children: subNavData[key].children,
});
console.log('传参路由的值', routerName.value);
// 监听主导航条按钮的点击更换key值
watch(routerName, (newValue, old) => {
console.log(newValue, old);
subNavList.title = subNavData[newValue].title;
subNavList.children = subNavData[newValue].children;
console.log(subNavList);
});
return {
subNavList,
subNavNo,
watch,
};
},
});