vue組件傳值

vue組件傳值--詳細版

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

或者  可以用$parent來實現

使用$parent.獲取父組件對象，然后再獲取數據對象

 　　　　子組件代碼

  mounted() {
    this.msg22 = this.$parent.msg2;
  }

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