vue组件传参，调用方法的几种方式

需要源码的可以直接拉到最下面，下载

---

此文章主要有以下几种方式通信

1. props
2. $refs
3. $emit
4. eventBus
5. provide 和 inject
6. vuex(这个略)

1. vue 父组件像子组件传值——props方法

a调用b，则a是父组件，b是子组件

先看代码，下方有详细解释

//父组件 App.vue
<template>
  <div id="app">
    <p>我是父组件</p>
    <app-son :dataList="appData"></app-son>
  </div>
</template>

<script>

import appSon from "./components/appSon/index"; //引入子组件appSon

export default {
  name: 'app',
  components: {
    appSon
  },
  data(){
    return {
      appData:{
        title:"我是父组件的dataList数据"
      }
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

// 子组件 appSon
<template>
  <div>
    <p class="red">我是子组件</p>
    <p class="red">{{dataList.title}}</p>
  </div>
</template>

<script>

export default {
  name: 'appSon',
  props: {
    dataList: {
      type: [Object],
    },
    
  },
  mounted(){
    console.log(this.dataList.title)
  }
}
</script>

<style scope>
  .red{
    color: red; 
  }
</style>

解释

2. 父组件调用子组件方法——$refs

通过$refs,父组件可以调用子组件方法和传参

事例 不写代码了，下面有git源码

3.子组件调用父组件方法并且传参——$emit

4.兄弟组件通信，或者父子层次比较深的——eventBus

先在父组件同层级的地方建立（在哪建立都可以，只要确保他只有一次new就行）：eventBus.js

// eventBus
import Vue from 'vue';
export default new Vue();

5. provide 和 inject（这个还是很强大的，但是官方不推荐）

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

vue官网

事例及介绍

vuex

略…
这个算是vue生态，使用方法，可以看官网或者其它文章

源码如下：
源码下载