vue 中传值（父传子、子传父（传递多个事件）、eventBus

1.0 父传子

父组件向子组件传值:子组件用props:['值'] 接收 ;

2.0 子传父

子组件向父组件传值 ：通过$emit事件传递

// father.vue
<template>
  <div class="father">
    <p>接收子组件传递过来的值{{msg}}</p>
     // 引入的子组件
    <child @eventHandle='handle'></child> 
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "默认值"
    };
  },
  created() {},
  components:{
      child:()=> import ('./secondChild.vue')
  },
  methods: {
    handle(messge) {
      this.msg = messge; 
      console.log(this.msg) // --->子组件中的值
    }
  }
};

// child.vue
<template>
   <div class="child">
      <p @click="sendMsg">向父组件传值</p>
   </div>
</template>
 <script>
  export default {
        data(){
          return {
              childValue:"子组件中的值"
          }
     },
  created(){},
  methods:{
        sendMsg(){
            this.$emit('eventHandle',this.childValue) // ----> $emit(父组件接收的事件名, 子组件中的值)
      }
    }
   }
  </script>
<style>
</style>

传值前.png
传值之后页面渲染新值.png

3.0 eventBus

01. 创建一个eventBus.js文件
文件目录 src->assets->js>eventBus.js

import Vue form 'vue'
export default new Vue

02.新建vue

<template>
   <div class="person">
      <p> 我是一个组件我需要向其他组件进行传值</p>
       <p @click="sendMsg">传值</p>
   </div>
  <script>
import bus from 'eventBus文件所在的路径' // --> 如： ''../../assets/js/eventBus"
  export default {
        data(){
          return {
              msg ："我是一个测试的value"
          }
     },
  created(){},
  methods:{
        sendMsg(){
          bus.$emit("handle",this.msg) // ---> handle：事件名; this.msg : 要传递的值
        }
    }
   }
  </script>
</template>
<style>
</style>

// outherPerson.vue
<template>
   <div class="outherPerson">
      <p> 我是另一个组件我负责接收其他兄弟传过来的值</p>
       <p @click="receiveMsg">接收值+{{msg}}</p>
   </div>
  <script>
import bus from 'eventBus文件所在的路径' // --> 如： ''../../assets/js/eventBus"
  export default {
        data(){
          return {
              msg ："我是默认值"
          }
     },
  created(){},
  methods:{
        receiveMsg(){
          bus.$on("handle",function(message){ // --->handle ： 事件名 (同传值的事件名一致) ；message : 接收的值 
                  this.msg = message ； // ---->我是一个测试的value
          })
        }
    }
   }
  </script>
</template>
<style>
</style>

//main.vue
*兄弟组件中进行互相传值:$emit('handle',value) 进行传值$on('handle',function(msg){//--> msg 是接收其他组件传递过来的值 })*
<template>
   <div class="main">
       <Person></Person>
       <Outherperson></Outherperson>
   </div>
  <script>
  export default {
        data(){
          return {}
     },
components:{
      Person：()=> import ('./person.vue') ; //-----> person.vue 的路径
      Outherperson：()=> import ('./outherPerson.vue') ; 
}
  created(){},
  methods:{}，

   }
  </script>
</template>
<style>
</style>

效果图:

传值之前.png
传值成功显示.png
还有一种情况是vuex (vue 的插件vuex 数据管理)

4.0子组件中一个点击事件通过不同的值向父组件触发不同的事件并传递val

//子组件中
<template>
  <div>
      <p @click="getClick(1)">点击1</p>
      <p @click="getClick(2)">点击2</p>
  </div>
</template>

<script>
export default {
    data(){
        return{}
    },
    methods:{
        getClick(value){
          // 根据子组件中不同的value 值触发不同的事件
            if(value==1){
                this.$emit("change1",value) 
            }else {
               this.$emit("change2",value)
               
            }
        }
    }
}
</script>

//父组件
<template>
  <div>
      <Child @change1="getvalue1" @change2='getvalue2' ></Child>
  </div>
</template>

<script>
export default {
    data(){
        return{}
    },
    components:{
        Child:()=> import ('./testChild.vue')
    },
    methods:{
        getvalue1(val){
          //接收子组件通过事件传递过来的值
            val+=1
            console.log("parmas11:::",val) //2
        },
        getvalue2(parmas){
         //接收子组件通过事件传递过来的值
            parmas+=2
            console.log("parmas22:::",parmas) //4
        },
       
    }
}
</script>

image.png