Vue assembly by value passed from father to son child parent sibling components by value

vue parent component to a sub-assembly by value

Parent component subassembly to pass value  : Collapsed = "Collapsed"  , subassembly receiving parent component values transmitted by props   props: [ "collapsed"]  

Parent component subassembly to pass values  the this. $ EMIT ( 'FUNC', Val)     , parent component by defining a method   @ func = "getVal"        value is passed over to receive the subassembly

Brothers A component assembly pass through the first value     this. $ Emit ( 'func' , val)    to pass parent component values, component B and component A receives the value transmitted by the parent component props

 

Parent component

<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <Sider :collapsed="collapsed" @func="getVal"></Sider>
    <a-layout>
      <Header :collapsed="collapsed" @getCollapsed='getCollapsed'></Header>
      <Content></Content>
    </a-layout>
  </a-layout>
</template>
<script>
import Sider from './Sider'
import Header from './Header'
import Content from './Content'
export default {
  data() {
    return {
      collapsed: false
    };
  },
  components:{
    Sider,
    Header,
    Content
  },
  methods: {
    getCollapsed(val){
      this.collapsed = val
    },
    getVal(val){
      this.collapsed = val
    }
  }
};
</script>
<style>
#components-layout-demo-custom-trigger {
  height: 100%;
}
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
</style>

 

A subassembly

<template>
  <a-layout-header style="background: #fff; padding: 0">
    <a-icon
      class="trigger"
      :type="collapsed ? 'menu-unfold' : 'menu-fold'"
      @click="collapseds"
    />
  </a-layout-header>
</template>
<script>
export default {
  props:['collapsed'],
  data() {
    return {
      
    };
  },
  methods: {
    collapseds(){
      this.getcollapsed = !this.getcollapsed
    },
  },
  computed:{
    getcollapsed:{
      get(){
        return this.collapsed
      },
      set(val){
        this.$emit('getCollapsed',val)
      }
    }
  }
};
</script>
<style>

</style>

 

 

Subassembly B

<template>
  <a-layout-sider
    :trigger="null"
    collapsible
    v-model="getCollapsed"
    breakpoint="lg"
    @collapse="onCollapse"
    @breakpoint="onBreakpoint"
  >
    <div class="logo" />
    <a-menu theme="dark" mode="inline" :defaultSelectedKeys="['1']">
      <a-menu-item key="1">
        <a-icon type="user" />
        <span>nav 1</span>
      </a-menu-item>
      <a-menu-item key="2">
        <a-icon type="video-camera" />
        <span>nav 2</span>
      </a-menu-item>
      <a-menu-item key="3">
        <a-icon type="upload" />
        <span>nav 3</span>
      </a-menu-item>
    </a-menu>
  </a-layout-sider>
</template>
<script>
export default {
  props: ["collapsed"],
  data() {
    return {
    };
  },
  methods: {
    onCollapse(getCollapsed, type) {
      console.log(getCollapsed, type);
    },
    onBreakpoint(broken) {
      console.log(broken);
    }
  },
  computed:{
    getCollapsed: {
      get(){
        return this.collapsed
      },
      set(val){
        this.$emit('func',val)
      }
    }
  },
};
</script>
<style>
</style>

 

Props change in the component value given by value component follows the neutron

 

 

Solution

Component must pass the value to change the value of the parent element is computed by calculating the properties of sub-components if you want to change the data value of props

computed:{
    getCollapsed: {
      get(){
        return this.collapsed
      },
      set(val){
        this.$emit('func',val)
      }
    }
  },