组件间通讯方法

1.父组件向子组件传值

在父组件中使用子组件，本质通过v-bind绑定属性传入子组件，子组件通过props接收父组件传入的属性。

明父组件如何向子组件传递值：在子组件Users.vue中如何获取父组件App.vue中的数据 users:["Henry","Bucky","Emily"]

//App.vue父组件
<template>
  <div id="app">
    <users v-bind:users="users"></users>//前者自定义名称便于子组件调用，后者要传递数据名
  </div>
</template>
<script>
import Users from "./components/Users"
export default {
  name: 'App',
  data(){
    return{
      users:["Henry","Bucky","Emily"]
    }
  },
  components:{
    "users":Users
  }
}

//users子组件
<template>
  <div class="hello">
    <ul>
      <li v-for="user in users">{{user}}</li>//遍历传递过来的值，然后呈现到页面
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props:{
    users:{           //这个就是父组件中子标签自定义名字
      type:Array,
      required:true
    }
  }
}
</script>

2.子组件向父组件传值（通过事件形式） 

子组件触发父组件方法,通过回调的方式将修改的内容传递给父组件，父组件通过v-on接收子组件传入的方法，并接收子组件传入的参数。

// 子组件
<template>
  <header>
    <h1 @click="changeTitle">{{title}}</h1>//绑定一个点击事件
  </header>
</template>
<script>
export default {
  name: 'app-header',
  data() {
    return {
      title:"Vue.js Demo"
    }
  },
  methods:{
    changeTitle() {
      this.$emit("titleChanged","子向父组件传值");//自定义事件  传递值“子向父组件传值”
    }
  }
}
</script>
复制代码
// 父组件
<template>
  <div id="app">
    <app-header v-on:titleChanged="updateTitle" ></app-header>//与子组件titleChanged自定义事件保持一致
   // updateTitle($event)接受传递过来的文字
    <h2>{{title}}</h2>
  </div>
</template>
<script>
import Header from "./components/Header"
export default {
  name: 'App',
  data(){
    return{
      title:"传递的是一个值"
    }
  },
  methods:{
    updateTitle(e){   //声明这个函数
      this.title = e;
    }
  },
  components:{
   "app-header":Header,
  }
}
</script>

3.非父子组件间的数据传递，兄弟组件传值

可以隔代通信，不必像使用v-bind数据绑定一样，需要用prop逐层传递

可通过 PubSubJS 库来实现非父子组件之间的通信 ，使用 PubSubJS 的消息发布与订阅模式，来进行数据的传递。

    // 子组件发布消息
    /* Todo.vue */
    methods : {
        delete_data(){ // 子组件私有函数
            if(window.confirm(`确认要删除吗`)){
            /* 发布消息 */
            PubSub.publish("delete_data", comment) // 参数一：消息名；参数二：需要传递的参数数据
        }
    }

    // 爷组件订阅消息
    /* App.vue */
    mounted() { //挂载后就订阅
        /* 订阅消息 */
        PubSub.subscribe('delete_data' , (msg , comment)=>{    // 参数一msg：暂时无关紧要，但是必须写；参数二：对应传递的数据
        this.delete_data(comment)    // 调用此组件里的函数
        // this.comments_data = this.comments_data.filter(item => item!=comment)
    })
    }

/**
*孙组件如果调用了含有发布消息的函数，订阅消息里的操作便会被触发，同时也会伴随组件数据以函数参数进行传递

父组件： App.vue

<template>
  <div id="app">
    <Child_1/>
    <hr>
    <Child_2/>
  </div>
</template>
<script>
  import Child_1 from "./Child_1";
  import Child_2 from "./Child_2";
    export default {
        name: 'App',
        components:{
          Child_1,
          Child_2
        },
    }

</script>
<style>
</style>

 子组件一：Child_1.vue

<template>
    <div>
      <p>child-1 组件</p>
      <button @click="info_child_2">通知Child-2</button>
    </div>
</template>
<script>
  import PubSub from 'pubsub-js'
    export default {
        name: "Child_1",
        methods:{
            info_child_2(){
                PubSub.publish('from_child_1','来自child-1的消息数据')
            }
        }
    }
</script>
<style scoped>
</style>

 组件二：Child_2.vue

<template>
    <div>
      <p>child-2 组件</p>
      <p>{{message}}</p>
    </div>
</template>
<script>
  import PubSub from 'pubsub-js'
    export default {
        name: "Child_2",
        data(){
            return{
                message:''
            }
        },
        mounted() {
            PubSub.subscribe('from_child_1',(msg,data)=> {
                this.message=data
            })
        }
    }
</script>
<style scoped>
</style>

 

效果图： 

4.  vue兄弟组件之间通信--eventBus

https://juejin.im/post/5d035f6b6fb9a07f0052d7de#comment

5.  vuex