vue 學習五 深入了解components（父子組件之間的傳值）

 

上一章記錄了 如何在父組件中向子組件傳值，但在實際應用中，往往子組件也要向父組件中傳遞數據，那么此時我們應該怎么辦呢

 1.在父組件內使用v-on監聽子組件事件，並在子組件中使用$emit傳遞數據

 

//父組件
<template>
  <div id="home">
    <com test='12345' test2='1213232111111' @a_even="a_even"></com> //使用v-on監聽子組件事件 @為v-on縮寫
  </div>
</template>

<script>
import com from "../components/a_component";
export default {
  name: "home",
  components: {
   com
  },
  methods: {
    a_even(e){
      console.log('even',e) //e的值，就為子組件內，a_even事件的事件參數
    }
  }
};
</script>

//子組件
<template>
  <div class="a_component-wrap">
    <h1>
      {{a1}}
    </h1>
    <input v-model="a1"/>
  </div>
</template>

<script>
export default {
  name: "AComponent",
  data(){
    return{
      a1:'123'
    }
  },
  watch:{
    a1(){   //當a1的值改變時 觸發a_even自定義事件，並將this.al作為事件參數
      let vm=this;
      vm.$emit('a_even',vm.a1)
    }
  }
};
</script>

2.在vue中，凡是在methods中定義的方法的this，都指向當前組件實例，可以利用這個特性，在props中傳遞一個帶參的方法

//父組件
<template>
  <div id="home">
    <com :base_f="base_f"></com> //講base_f當作props參數傳遞至子組件
  </div>
</template>

<script>
import com from "../components/a_component";
export default {
  name: "home",
  components: {
   com
  },
  methods: {
    base_f(option){//在methods中定義的方法，不管在哪里調用this的指向，都是定義時的實列，這是因為在methods中定義方法時，會對方法使用js的 bind（）感興趣的同學可以自行搜索，再次就不多說
      console.log(option) //打印的是子組件調用base_f傳入的參數
      console.log(this) // 打印的是當前父組件的實例

    }
  }
};
</script>

<template>
  <div class="a_component-wrap">
    <h1>
      {{a1}}
    </h1>
    <input v-model="a1"/>
  </div>
</template>

<script>
export default {
  name: "AComponent",
  props:{
    base_f:{
      type:Function,//定義接收的props
    }
  },
  data(){
    return{
      a1:""
    }
  },
  watch:{
    a1(){
      let vm=this;
      this.base_f(vm.a1);//在子組件中使用傳遞過來的base_f方法，並傳入子組件中的參數a1
    }
  }
};
</script>

這中方法涉及到js中的閉包，和this指向，了解其中原因，對在js中涉入不深的童鞋頗有收益。但通常實際使用還是推薦第一種方法，值得一提的是。如果在這種傳值方法內，你在base_f中改變父組件的狀態，是不會引起vue的報錯的

3兄弟組件之間的傳值

 其是兄弟組件之間的傳值，其是通過組合以上方法也可實現，先由子組件a傳值個父組件，再由父組件傳值給b組件。

不過這樣未免太過麻煩，所有這個時候，如果能夠有一個管理共用狀態的loader就是非常必要了，沒錯這就是vuex