image.png

如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。
本文总结了 vue 组件间通信的几种方式，如 props、on、vuex、children、listeners 和 provide/inject

方法一、props/$emit

(A => B)父组件 A 通过 props 的方式向子组件 B 传递
(B => A)通过在 B 组件中 emit,让父组件监听到自定义事件 )。

1.父组件向子组件传值

接下来我们通过一个例子，说明父组件如何向子组件传递值：在子组件 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.子组件向父组件传值（通过事件形式）

接下来我们通过一个例子，说明子组件如何向父组件传递值：当我们点击 “Vue.js Demo” 后，子组件向父组件传递值，文字由原来的“传递的是一个值”变成“子向父组件传值”，实现子组件向父组件值的传递。

image.png

    // 子组件
    <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">
        //与子组件titleChanged自定义事件保持一致
        <app-header v-on:titleChanged="updateTitle" ></app-header>
        // 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>

总结

常见使用场景可以分为三类：

• 父子通信：
  父向子传递数据是通过 props，子向父是通过 events（parent/attrs/$listeners
• 兄弟通信：
  Bus；Vuex
• 跨级通信：
  Bus；Vuex；provide/inject API、listeners

原文链接：https://segmentfault.com/a/1190000019208626