Vue组件传值 父传子 子传父 兄弟组件传值

vue父级组件给子级组件传值

父组件给子组件传值 :collapsed="collapsed" ，子组件通过props接收父组件传递的值  props: ["collapsed"]  

子组件给父组件传值 this.$emit('func',val)    ，父组件通过定义方法  @func="getVal"       来接收子组件传递过来的值

兄弟组件传值  首先组件A通过    this.$emit('func',val)   给父组件传值，然后组件B通过props来接收组件A传给父组件的值

 

父组件

<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

<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>

 

 

子组件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的值报错如下

 

 

解决方法

在组件传值中如果子组件想要改变props的值的数据必须通过 计算属性  computed  去改变父组件的值

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