vue组件之间的传参详解(父子，兄弟组件)

vue常用的传值 ，无非就是父子之间，或者兄弟之间去传值，下边一一介绍他们之间如何传参

父=>子

father.veu(父组件)

<template>
  <div>
      父组件：{{message}}
      <Son :toSonData="toSonData"></Son>//在components注册的子组件
  </div>
</template>
 
<script>
import Son from "./Son.vue";
export default {
  data() {
    return {
      message : "我是爸爸",
      toSonData: "大嘴巴子"//给子组件的值
    };
  },
 
  components: {
    Son
  }
};
</script>
<style lang='scss' scoped>
</style>

Son.vue（子组件）

<template>
  <div>
    子组件：{{message}}
    <br>
    爸爸给我的礼物：{{toSonData}}
  </div>
</template>
 
<script>
export default {
  // props:["toSonData"],//第一种方式
  props:{//第二种方式
    toSonData:{
      type:String,
      default:function(){
        return ""
      }
    }
  },
  data () {
    return {
      message : "我是儿子"
    };
  },
}
 
</script>
<style lang='scss' scoped>
</style>

子=>父

father.veu(父组件)

<template>
  <div>
      父组件：{{message}}
      子组件接收的礼物：{{sondata}}
      <Son @reception="jiehsou"></Son>
  </div>
</template>
 
<script>
import Son from "./Son.vue";
export default {
  data() {
    return {
      message : "我是爸爸",
      sondata:''//接收子组件传来的值
    };
  },
 
  components: {
    Son
  },
  methods:{
    jiehsou(data){
      console.log(data)
      this.sondata = data;
    }
  }
};
</script>
<style  scoped>
</style>

Son.vue（子组件）

<template>
  <div>
    子组件：{{message}}
    <button @click="add">点击向父组件传值</button>
  </div>
</template>
 
<script>
export default {

  data () {
    return {
      message : "我是儿子",
      msg:'给父亲的礼物'
    };
  },
  methods:{
  add(){
     this.$emit('reception',this.msg)
  }
  },
}
 
</script>
<style scoped>
</style>

兄弟之间的传值(注意：兄弟之间的传值和子传父的方式类似，都是通过emit事件发射的形式，但兄弟之间要找一个vue实例作为媒介,来进行传参，新建一个js文件列如event.js)

event.js里的内容
import Vue from ‘vue’;
export default new Vue;

注意要在所传参的兄弟组件中import导入

father.veu(父组件)

<template>
  <div>
      父组件：{{message}}
      <Son></Son>
      <brother></brother>
  </div>
</template>
 
<script>
import Son from "./Son.vue";
import brother from "./brother.vue";
export default {
  data() {
    return {
      message : "我是爸爸",
    };
  },
  components: {
    Son,
    brother
  },

};
</script>
<style  scoped>
</style>

Son.vue（子组件）

<template>
  <div>
    子组件：{{message}}
    <button @click="add">点击向兄弟组件传值</button>
  </div>
</template>
 
<script>
import events from '../assets/event'  //import导入上文所说的event,js
export default {

  data () {
    return {
      message : "我是儿子",
      msg:'给兄弟的礼物'
    };
  },
  methods:{
  add(){
     events.$emit('reception',this.msg)
  }
  },
}
 
</script>
<style scoped>
</style>

子组件（brother.vue）

<template>
  <div>
      <span>我是兄弟组件</span>
      <span>接收兄弟传过来的值：{{bro}}</span>
  </div>
</template>

<script>
import events from '../assets/event'  //import导入上文所说的event,js
export default {
   data() {
       return {
           bro:''
       }
   },
   created(){
    this.butn()
   },
   methods:{
       butn(){
           events.$on('reception',(res)=>{  //res就是兄弟组件 Son传过来的值
               this.bro = res
           })
       }
   }
}
</script>

<style>

</style>

vue之间的传值 可以使用 vuex 或者本地存储的方式， 后期更新vuex的用法

vuex使用详解（https://blog.csdn.net/qq_46124502/article/details/106868312）