在vue組件通信中其中最常見通信方式就是父子組件之中的通性岩饼，而父子組件的設定方式在不同情況下又各有不同。最常見的就是父組件為控制組件子組件為視圖組件毫捣。父組件傳遞數(shù)據(jù)給子組件使用撒会，遇到業(yè)務邏輯操作時子組件觸發(fā)父組件的自定義事件奸腺。無論哪種組織方式父子組件的通信方式都是大同小異。

父組件到子組件通訊

父組件到子組件的通訊主要為：子組件接受使用父組件的數(shù)據(jù)诗祸，這里的數(shù)據(jù)包括屬性和方法（String,Number,Boolean,Object, Array ,Function）跑芳。vue提倡單項數(shù)據(jù)流浇冰，因此在通常情況下都是父組件傳遞數(shù)據(jù)給子組件使用，子組件觸發(fā)父組件的事件聋亡，并傳遞給父組件所需要的參數(shù)肘习。

通過props傳遞數(shù)據(jù)

父子通訊中最常見的數(shù)據(jù)傳遞方式就是通過props傳遞數(shù)據(jù)，就好像方法的傳參一樣坡倔，父組件調(diào)用子組件并傳入數(shù)據(jù)漂佩，子組件接受到父組件傳遞的數(shù)據(jù)進行驗證使用。

<!--父組件-->
<template>
  <div>
    <h2>父組件</h2>
    <br>
    <Child-one :parentMessage="parentMessage"></Child-one>
  </div>
</template>
<script>
  import ChildOne from './ChildOne';

  export default{
    components: {
      ChildOne,
    },
    data() {
      return {
        parentMessage: '我是來自父組件的消息',
      };
    },
  };
</script>
<style scoped>
</style>

<!--子組件-->
<template>
  <div>
    <h3>我是子組件一</h3>
    <span>{{parentMessage}}</span>
  </div>
</template>
<script>
  export default{
    props: ['parentMessage'],
  };
</script>
<style scoped>
</style>

props可以接受function,所以function也可以以這種方式傳遞到子組件使用罪塔。

通過$on傳遞父組件方法

通過$on傳遞父組件方法是組件通信中常用的方法傳遞方式投蝉。它可以與通過props傳遞方法達到相同的效果。相比于props傳遞function,它更加的直觀和顯示的表現(xiàn)出了調(diào)用關系征堪。

<!--父組件-->
<template>
  <div>
    <h2>父組件</h2>
    <br>
    <Child-one @childEvent="parentMethod"></Child-one>
  </div>
</template>
<script>
  import ChildOne from './ChildOne';

  export default{
    components: {
      ChildOne,
    },
    data() {
      return {
        parentMessage: '我是來自父組件的消息',
      };
    },
    methods: {
      parentMethod() {
        alert(this.parentMessage);
      },
    },
  };
</script>
<style scoped>
</style>

<!--子組件-->
<template>
  <div>
    <h3>我是子組件一</h3>
  </div>
</template>
<script>
  export default{
    mounted() {
      this.$emit('childEvent');
    },
  };
</script>
<style scoped>
</style>

獲取父組件然后使用父組件中的數(shù)據(jù)（不推薦）

準確來說這種方式并不屬于數(shù)據(jù)的傳遞而是一種主動的查找瘩缆。父組件并沒有主動的傳遞數(shù)據(jù)給子組件，而是子組件通過與父組件的關聯(lián)關系佃蚜，獲取了父組件的數(shù)據(jù)庸娱。
該方法雖然能實現(xiàn)獲取父組件中的數(shù)據(jù)但是不推薦這種方式，因為vue提倡單向數(shù)據(jù)流谐算，只有父組件交給子組件的數(shù)據(jù)子組件才有使用的權限熟尉，不允許子組件私自獲取父組件的數(shù)據(jù)進行使用。在父與子的關系中子應當是處于一種被動關系洲脂。

  this.$parent

此處的this為子組件實例

子組件到父組件通訊

子組件到父組件的通訊主要為父組件如何接受子組件之中的數(shù)據(jù)斤儿。這里的數(shù)據(jù)包括屬性和方法（String,Number,Boolean,Object, Array ,Function）。

通過$emit傳遞父組件數(shù)據(jù)

與父組件到子組件通訊中的$on配套使用恐锦，可以向父組件中觸發(fā)的方法傳遞參數(shù)供父組件使用往果。

<!--父組件-->
<template>
  <div>
    <h2>父組件</h2>
    <br>
    <Child-one @childEvent="parentMethod"></Child-one>
  </div>
</template>
<script>
  import ChildOne from './ChildOne';

  export default{
    components: {
      ChildOne,
    },
    data() {
      return {
        parentMessage: '我是來自父組件的消息',
      };
    },
    methods: {
      parentMethod({ name, age }) {
        console.log(this.parentMessage, name, age);
      },
    },
  };
</script>
<style scoped>
</style>

<!--子組件-->
<template>
  <div>
    <h3>我是子組件一</h3>
  </div>
</template>
<script>
  export default{
    mounted() {
      this.$emit('childEvent', { name: 'zhangsan', age:  10 });
    },
  };
</script>
<style scoped>
</style>

refs獲取

可以通過在子組件添加ref屬性，然后可以通過ref屬性名稱獲取到子組件的實例一铅。準確來說這種方式和this.$parent一樣并不屬于數(shù)據(jù)的傳遞而是一種主動的查找陕贮。
盡量避免使用這種方式。因為在父子組件通信的過程中馅闽。父組件是處于高位是擁有控制權飘蚯，而子組件在多數(shù)情況下應該為純視圖組件，只負責視圖的展示和自身視圖的邏輯操作福也。對外交互的權利應該由父組件來控制局骤。所以應當由父組件傳遞視圖數(shù)據(jù)給子組件，子組件負責展示暴凑。而子組件的對外交互通過$emit觸發(fā)父組件中相應的方法峦甩，再由父組件處理相應邏輯。

<template>
  <div>
    <h2>父組件</h2>
    <br>
    <Child-one ref="child"></Child-one>
  </div>
</template>
<script>
  import ChildOne from './ChildOne';

  export default{
    components: {
      ChildOne,
    },
    mounted(){
      console.log(this.$refs['child']);
    },
  };
</script>
<style scoped>
</style>

this.$refs['child']