三个页面,index,render,render下的组件。
点击能打印出来数据,但是功能没法实现,我看有说用计算属性来做,这种该怎么做。(这个是组件计算属性实现的方法,我vuex那个方法实现也有问题。)
大致流程,侧边栏通过汉堡包关合。
index:
// 父组件collapsed要传给子路由
<a-layout-sider
id="components-layout-demo-custom-trigger"
v-model="collapsed"
:trigger="null"
collapsible
>
<router-view :collapsed='collapsed' class="home-con"></router-view>
data() {
return {
collapsed: false,
};
},
render:
<header-side :collapsed="collapsed"></header-side>
props: ["collapsed"],
data() {
return {
// colla:''
};
},
子组件(获取到了,但是面包屑并不管使):
<a-layout-header style="background: #fff; padding: 0">
<a-icon
class="trigger"
:type="colla ? 'menu-unfold' : 'menu-fold'"
@click="changeTab"
/>
</a-layout-header>
props: ["collapsed"],
data() {
return {
};
},
watch: {
collapsed: function(value) {
console.log(value);
},
},
computed: {
colla: {
// return this.collapsed;
//getter 方法
get() {
console.log("computed getter...");
console.log(this.collapsed)
return this.collapsed;
},
//setter 方法
set(newValue) {
console.log("computed setter...");
var val = this.$emit('collapsed',false);
// // this.collapsed = val; // 这个地方直接报错
console.log(newValue)
return val
},
},
},
methods: {
changeTab() { // 这个函数跟小图标左右标识有关系。
this.colla = !this.colla;
console.log(this.colla);
},
},
点击能打印出来的数据
////////////////////////////////////////////////////
设置过setter,getter后数据就一直不改了。
自问自答,router-view这个是路由的出口,在这个上面传递属性或者函数要用:并且其他页面接收是跟组件传值基本一致,而组件传值的方法必须用@传递。

页面逻辑:
index页面相关代码:
render页面相关代码:
render子组件相关代码: