【Vue.js】組件之間互相調用彼此的方法，子調父，父調子

概述

兄弟組件之間的通訊有一個方法是通過父組件進行交互，那麼解決的思路就是子組件調用父組件的方法，然後父組件調用另一個子組件的方法，這樣就實現了兄弟組件的交互功能。

父組件調用子組件方法

1. 首先被父組件調用的子組件方法定義一下

   appendToTree({param}){
      console.log('這是子組件tree的方法')
   },

    

2. 父組件parent.vue中的子組件加一個ref屬性，就相當於給這個子組件取了一個別名。注意，這個是加在需要調用的子組件上的

   <treeModel ref="tree"></treeModel>

    

子組件調用父組件方法

1. 在子組件上添加一個事件（或者別名？對前端的專業術語不瞭解），名字隨便取，值是準備調用的父組件方法

   <child @parentFn="childTreeFn"></child >

    

2. 在子組件中通過$.emit方法來調用父組件的方法

   //子組件的方法名，隨便取
   submit() {
       //因爲要調用的是事件爲parentFn，後面跟上參數
       this.$emit('parentFn',{param:this.argument});
   },