前言

vue的元件傳值分為三種方式：父傳子、子傳父、非父子元件傳值

引用官網的一句話：父子元件的關係可以總結為 prop 向下傳遞，事件向上傳遞

父元件通過 prop 給子元件下發資料，子元件通過事件給父元件傳送訊息，如下圖所示：

下面我們就開始用程式碼（一言不合就上程式碼）詳細的介紹vue元件傳值的三種方式

1、父傳子

子元件的程式碼：

<template>
    <div id="container">
        {{msg}}
    </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props:{
    msg: String
  }
};
</script>
<style scoped>
#container{
    color: red;
    margin-top: 50px;
}
</style>
 

父元件的程式碼：

<template>
    <div id="container">
        <input type="text" v-model="text" @change="dataChange">
        <Child :msg="text"></Child>
    </div>
</template>
<script>
import Child from "@/components/Child";
export default {
  data() {
    return {
      text: "父元件的值"
    };
  },
  methods: {
    dataChange(data){
        this.msg = data
    }
  },
  components: {
    Child
  }
};
</script>
<style scoped>
</style>
 

父傳子的實現方式就是通過props屬性，子元件通過props屬性接收從父元件傳過來的值，而父元件傳值的時候使用 v-bind 將子元件中預留的變數名繫結為data裡面的資料即可

2、子傳父

子元件程式碼：

<template>
    <div id="container">
        <input type="text" v-model="msg">
        <button @click="setData">傳遞到父元件</button>
    </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "傳遞給父元件的值"
    };
  },
  methods: {
    setData() {
      this.$emit("getData", this.msg);
    }
  }
};
</script>
<style scoped>
#container {
  color: red;
  margin-top: 50px;
}
</style>
 

父元件程式碼： 

<template>
    <div id="container">
        <Child @getData="getData"></Child>
        <p>{{msg}}</p>
    </div>
</template>
<script>
import Child from "@/components/Child";
export default {
  data() {
    return {
      msg: "父元件預設值"
    };
  },
  methods: {
    getData(data) {
      this.msg = data;
    }
  },
  components: {
    Child
  }
};
</script>
<style scoped>
</style>

子傳父的實現方式就是用了 this.$emit 來遍歷 getData 事件，首先用按鈕來觸發 setData 事件，在 setData 中 用 this.$emit 來遍歷 getData 事件，最後返回 this.msg

總結：

• 子元件中需要以某種方式例如點選事件的方法來觸發一個自定義事件
• 將需要傳的值作為$emit的第二個引數，該值將作為實參傳給響應自定義事件的方法
• 在父元件中註冊子元件並在子元件標籤上繫結對自定義事件的監聽

3、非父子 

vue 中沒有直接子對子傳參的方法，建議將需要傳遞資料的子元件，都合併為一個元件

如果一定需要子對子傳參，可以先從傳到父元件，再傳到子元件（相當於一個公共bus檔案）

為了便於開發，vue 推出了一個狀態管理工具 vuex，可以很方便實現元件之間的引數傳遞