VUE父子組件傳值問題

一.父組件向子組件傳遞數據

組件實例的作用域是孤立的。這意味着不能(也不應該)在子組件的模板內直接引用父組件的數據。要讓子組件使用父組件的數據，我們需要通過子組件的props選項。

1.靜態props

父組件:
<button msg="hello"></button>
子組件
<template>
  <div>{{msg}}</div>    //輸出 hello
</template>
<script>
    props:['msg']   //子組件通過props選項接收父組件傳參
</script>

2.動態props(要動態地綁定父組件的數據到子模板的props用 v-bind。每當父組件的數據變化時，該變化也會傳導給子組件)

    父組件: <button :msg="hello"></button>

3.單項數據流

prop 是單向綁定的：當父組件的屬性變化時，將傳導給子組件，但是不會反過來。這是為了防止子組件無意修改了父組件的狀態

另外，每次父組件更新時，子組件的所有 prop 都會更新為最新值。這意味着你++不應該在子組件內部改變 prop++ .

二.子組件向父組件傳遞數據

使用v-on綁定自定義事件,每個Vue實例都實現了事件接口,即:

使用$on(eventName)監聽事件

使用$emit(eventName)觸發事件

子組件部分:
<template>
    <input v-model="msg" @change="setMsg" />
</template>
<script>
    export default{
      data() {
        return { msg: '' }
      }
      methods: {
        setMsg() {
          this.$emit('tansferUser',this.msg)  //用 $emit 來遍歷 transferUser 事件，並返回 this.msg
        }
      }
    }
</script>

transferUser 是一個自定義的事件，功能類似於一個中轉，this.msg 將通過這個事件傳遞給父組件

父組件部分:
<template>
  <login @transferUser = "getMsg"></login>
</template>
//在父組件 App.vue 中，聲明了一個方法 getMsg，用 transferUser 事件調用 getMsg 方法，獲取到從子組件傳遞過來的參數 msg

<script>
  import login from '子組件存放路徑';
  export default{
    data() {
      return { user:'' }
    },
    components:{
        ligin
    },
    methods: {
      getMsg(msg) { //msg就是從子組件傳遞過來的參數msg
        this.user = msg;
      }
    }
  }
</script>

三.非父子組件間的通信

使用專門的狀態管理模式(vuex)