怎么通过计算属性让父组件传给子组件的值，再从子组件传回去时为响应式的。

Question

三个页面，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后数据就一直不改了。

Answer 1

自问自答，router-view这个是路由的出口，在这个上面传递属性或者函数要用：并且其他页面接收是跟组件传值基本一致，而组件传值的方法必须用@传递。
页面逻辑：

index页面相关代码：

<a-layout-sider
    id="components-layout-demo-custom-trigger"
    v-model="collapsed"
    :trigger="null"
    collapsible
>

<router-view :collapsed="collapsed" :success='success' class="home-con" ></router-view>

data() {
    return {
      collapsed: false,
    };
  },
  mounted() {},
  methods: {
    success(res) {
      this.collapsed = res;
      console.log(res);
    },
  },

render页面相关代码：

<header-side :collapsed="collapsed" @success='success'></header-side>

import headerSide from "@/components/Header.vue";

props: ["collapsed",'success']

render子组件相关代码：

<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",'success'],
  data() {
    return {
      colla: false,
    };
  },
  methods: {
    changeTab() {
      if (this.colla) {
        this.colla = false;
        this.$emit('success',false)
      } else {
        this.colla = true;
        this.$emit('success',true)
      }
    },
  },

Answer 2

在子组件watch collapsed 然后赋值给colla;
或者

computed:{
    colla(){
       return this.collapsed;
    }
}
试下；