Vue项目=====组件之间通信的几种方式

一、父组件给子组件传递数据 props

//父组件App
<template>
    <div id="container">
        <Child :msg="text"></Child>
    </div>
</template>
<script>
import Child from "@/components/Child";
export default {
  data() {
    return {
      text: "父组件的值"
    };
  }
  },
  components: {
    Child
  }
};
</script>
<style scoped>
</style>


//子组件Child 
<template>
    <div id="container"> {{msg}} </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props:['msg']
};
</script>
<style scoped>
#container{
    color: red;
    margin-top: 50px;
}
</style>

二、子组件给父组件传递数据通过$emit函数调用的方式

//父组件App
<template>
    <div id="container">
        <Child @getData="getData"></Child>
        <p>{{msg}}</p>
    </div>
</template>
<script>
import Child from "@/components/Child";
export default {
  data() {
    return {
      msg: "父组件默认值"
    };
  },
  methods: {
    getData(data) {
      this.msg = data;
    }
  },
  components: {
    Child
  }
};
</script>
<style scoped>
</style>
//子组件List  
<template>
    <div id="container">
        <input type="text" v-model="msg">
        <button @click="setData">传递到父组件</button>
    </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "传递给父组件的值"
    };
  },
  methods: {
    setData() {
      this.$emit("getData", this.msg);
    }
  }
};
</script>
<style scoped>
#container {
  color: red;
  margin-top: 50px;
}
</style>

三、兄弟组件(任何关系组件)之间传递数据 pubsub-js(消息订阅与发布机制)

1. 安装插件

  npm i pubsub-js 安装插件

2. 在需要使用的组件页面引入插件

  import PubSub from 'pubsub-js'

3. 在需要获取数据的组件A中订阅消息

  通过 PubSub.subscribe('MY TOPIC', (msg,data)=>{})来订阅消息
  // MY TOPIC 为订阅消息的名称 , msg为消息名称可用_代替,data为接收到的数据

4. 在将要发布数据的兄弟组件B中发布数据

  通过 PubSub.publish('MY TOPIC', 'hello world!');来发布数据
   // MY TOPIC 为发布消息的名称(必须和订阅消息名称一致) , hello world!为发布出去的数据

5.使用如下:

 //兄弟组件A  订阅消息
import axios from 'axios'
import PubSub from 'pubsub-js'
<template>
    <div id="container">{{masge}}</div>
</template>
<script>
export default {
  data() {
      return {
           masge: "" //兄弟组件发布的消息携带的参数值
         };
     }
  },
mounted(){
  //订阅消息  fabu001 为订阅消息名称  data为获取到的来自兄弟组件B发布的数据
    let  vm = this;
    PubSub.subscribe('fabu001',(_,data)=>{
         console.log(data)
         vm.masge = data
    })      
},
};
</script>
<style scoped>
</style>


//兄弟组件B 发布消息
import axios from 'axios'
import PubSub from 'pubsub-js'
<template>
    <input   type='test' v-model="userInfo" />
    <div id="container"> {{userInfo}} </div>
</template>
<script>
export default {
  data() {
    return {
        userInfo:'测试数据'
     };
  },
mounted(){
      let vm = this;
      //发布数据将数据传递给兄弟组件A  
       // fabu001为消息名称 必须和订阅的消息名称一致
       // vm.userInfo为传递给兄弟组件A组件的数据
       PubSub.publish('fabu001', vm.userInfo);
  }
};
</script>
<style scoped>
#container{
    color: red;
    margin-top: 50px;
}
</style>