vue组件之间传值几种方法

方法一、父子组件传值

通过props向下传递

父组件

<div class="menu_header">
      <Menu :msgChild="msg1" />
    </div>
  data() {
    return {
      msg1:'父组件的值',
      }
   }

子组件

<el-menu-item>{{msgChild}}</el-menu-item

export default {
  name: "Menu",
  props:{
    msgChild:String
  },

方法二、子组件传值给父组件

通过$emit()向上传递

子组件
写在script也是一样的

  <el-menu-item
            @click="$emit('pushId',99)" >向上传递</el-menu-item
          >

父组件

 <Menu :msgChild="msg1" @pushId="getChildrenId" />
 import Menu from "@/components/menu/Menu";
 export default {
  components: {
    Menu,
  },
  methods: {
    getChildrenId(id){
      alert('子组件传递的值'+id)
    },
}

方法三、事件监听

父组件

   <Menu :msgChild="msg1" @pushId="getChildrenId"  ref="son"/>
   mounted(){
            this.$refs['son'].$on('func',(msg)=>{
                console.log(msg);
            })
        },

子组件

 <el-menu-item
            @click="$emit('func','我是子组件传递的消息1！')" >向上传递2</el-menu-item
          >

方法四、子组件之间传值

子组件之间传值，可以通过父组件做为桥梁，传值
但过于繁琐，不推荐，我们可以新建中间文件

新建文件
bus.js

import Vue from 'vue'
export  default new Vue()

然后组件之间引入改文件
组件1

      <el-button
          type="danger"
          class="anniu1"
          size="mini"
          @click="readmsg"
          >触发组件</el-button
        >

import Bus from '@/bus.js'

export default {
  methods: {
    readmsg(){
      Bus.$emit('pushData','传递给其他子组件的值')
    },
    }
}

组件2

import Bus from '@/bus.js'
export default {
mounted() {

    Bus.$on('pushData',(msg)=>{
      alert(msg)
    })
    }
}

方法五、EventBus传参

1、在main.js种挂载全局EventBus
效果和方法四是一样的，使用起来更方便

//main.js
Vue.prototype.$EventBus = new Vue()//挂载全局EventBus

组件1

  readmsg(){
      this.$EventBus.$emit('pushData','传递给其他子组件的值')
    },

组件2

 mounted() {

    this.$EventBus.$on('pushData',(msg)=>{
      alert(msg)
    })
    }

方法六、消息发布与订阅

安装 pubsub-js 插件： npm i pubsub-js -s 可实现全局参数传递
组件1

<template>
    <div class="wrap">
        <div>我是组件A</div>
        <button @click="sendMsg">发送</button>
    </div>
</template>

<script>
    import  pubsub from 'pubsub-js'
    export default {
        name: "A",
        methods:{
            sendMsg(){
                pubsub.publishSync("sendMsg","这是A组件发布的消息！");
            }
        }
    }
</script>

组件2

<template>
    <div>
        <div>我是组件B</div>
    </div>
</template>

<script>
    import pubsub from 'pubsub-js'
    export default {
        name: "B",
        mounted(){
            pubsub.subscribe("sendMsg",(e,msg)=>{
                console.log(e,msg);//sendMsg 这是A组件发布的消息！
            })
        },
    }
</script>

publishSync
同步发送消息
publish
同步发送消息
subscribe
订阅消息
unsubscribe
卸载特定订阅
clearAllSubscriptions
清除所有订阅