三个页面,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后数据就一直不改了。
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…