vue組件傳值在日常開發中比較常見，在官方文檔里面也有介紹，但是對于新手理解起來會有一點生澀。所以今天就把這個拉出來寫一次。
一般有三種傳值方式：1.父傳子、2.子傳父、3.兄弟組件之間通信

1.父組件向子組件傳值

一般會在子組件里面定義props來做接收，這是比較常見的情況

這是父組件

<template>
  <div>
    <div>我是父組件</div>
    <div>我發送給第一個組件的信息是:{{msg}}</div>
    <div>
      <div id="child1">
        <ChildOne :msg="msg" />
      </div>
    </div>
  </div>
</template>

<script>
import ChildOne from "../components/children1";
import ChildTwo from "../components/children2";
export default {
  components: {
    ChildOne,
    ChildTwo
  },
  data() {
    return {
      msg: "我是父組件，我給你發消息",
    };
  }
};
</script>

可以看到我在第一個子組件上面傳入了一個msg,那么在子組件上就需要定義一個msg用來接收傳進來的參數

這是第一個子組件

<template>
  <div>
    <div id="title">我是第一個子組件</div>
    <div>我接受到的父組件的消息是：{{msg}}</div>
  </div>
</template>

<script>
export default {
  props: {
    msg: {
      type: String
    }
  }
};
</script>

效果

父傳子.png

2.子組件向父組件傳值

這時候就需要利用vue中的$emit將想要傳遞的值通過函數的形式傳出，在父組件接收

this.$emit(arg1,arg2) arg1:方法名字，arg2:要傳出的值

這是第二個子組件

<template>
  <div>
    <div id="title">我是第二個子組件</div>
    <div>我要發送給父組件的值：{{msg}}</div>
    <button @click="toParent">向父組件發送信息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "我是第二組件，我要給父組件傳值",
    };
  },
  methods: {
    toParent() {
      this.$emit("toParent", this.msg);
    }
  }
};
</script>

我在button上綁定了一個點擊事件，函數里面傳出了一個方法名為toParent的方法，這時候我們就要去父組件接收這個函數，它會帶一個返回值，這個返回值就是我們需要從子組件傳的值。

這是父組件

<template>
  <div>
    <div>我是父組件</div>

    <div>我即將接收第二組件傳值是：{{child2Msg}}</div>
    <div>
      <div id="child2">
        <ChildTwo @toParent="getMag" />
      </div>
    </div>
  </div>
</template>

<script>
import ChildOne from "../components/children1";
import ChildTwo from "../components/children2";
export default {
  components: {
    ChildOne,
    ChildTwo
  },
  data() {
    return {
      child2Msg: ""
    };
  },
  methods: {
    getMag(msg) {
      this.child2Msg = msg;
    }
  }
};
</script>

此時我在父組件里面定義了一個@toParent方法這個名稱要和子組件里面this.$emit(arg1)的命名一樣，用來接收。在getMag里面接收一個參數就是當前傳回的值。

效果

沒傳值的時候.png

已經傳值.png

3.兄弟組件傳值

兄弟組件之間就需要一個中間值，我在這里稱為bus。在vue文件main.js中，我們利用 Vue.prototype.bus=new Vue() 來定義，此時我們就有了一個中間量。

這是第一個子組件 -- 從這里向另外一個子組件傳值

<template>
  <div>
    <div id="title">我是第一個子組件</div>
      我要給第二個兄弟發信息，內容是：
      <input type="text" v-model="to" />
    </div>
    <button @click="toBrother">點我給兄弟傳值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      to: "哈嘍老二"
    };
  },
  methods: {
    toBrother() {
      this.bus.$emit("toBrother", this.to);
    }
  }
};
</script>

在這里我在button上綁定了一個方法，在方法內部使用中間變量bus中的$emit來傳遞值，參數同子傳父的參數一致。

這是第二個子組件--用來做接收方

<template>
  <div>
    <div id="title">我是第二個子組件</div> 
    <div>我得到的兄弟組件信息是：{{get}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      get: ""
    };
  }
  beforeCreate() {
    this.bus.$on("toBrother", msg => {
      this.get = msg;
    });
  }
};
</script>

在第二個子組件里面通過beforeCreate生命周期來獲得傳過來的值，這時候需要用this.bus.$on來接收，第一個參數是this.bus.$emit定義的第一個方法名，第二個參數是一個方法，此方法帶一個返回參數。在這里我使用箭頭函數。

效果

未傳值.png

以傳值.png

而且可以利用input來輸入不同的信息，傳入到兄弟組件中，例如

input改變信息內容.png

vue組件傳值大概就是這么多，日常開發相對來說還是足夠的。大家看到后覺得有什么問題，希望聯系我，我好快速改正！持續更新?。?！