基本觀念

我們今天要介紹的是vue元件(component)傳值，包括父傳子、子傳父和兄弟互傳，在實現元件互傳之前，我們要先來解釋父子元件關係，現在有a、b兩個元件，a引入了b元件，那a就是b的父元件，b就是a的子元件。而兄弟元件互傳的概念則比較複雜，現在有c、d、e三個元件，c引入了d和e元件，那d和e就是兄弟關係，若d要把值傳到e，要先把值傳到他們共同的父元件c，再傳到e元件。以上就是元件傳值的概念，接下來就是實做的部分。

父傳子

step 1

首先我們先創兩個元件home 和 kkk元件並把他們放在相應的資料夾，先在home裡面引入kkk

step 2

在 home的data 裡新增一筆變數tok，給值"預設值123"，並在元件標籤內放入 :msg="tok"，冒號為v-bind的縮寫，綁定tok，msg為傳過去的名稱，tok就是我們剛才設定的data

step 3

在要接受父元件傳值的元件(kkk)用prop接傳送過來的值，並定義型態string，然後在template放上訊息名稱，就可以看到傳過來的值了

step 4

若要動態修改父元件傳到子元件的值，只需在父元件加input輸入框，裡面放v-model:tok，傳入子元件的值就能隨著輸入框做更改

以下是程式碼

home.vue

<template>
  <div class="home">
    <input v-model="tok">
    <kkk :msge="tok" />
  </div>
</template>

<script>
// @ is an alias to /src
import kkk from '@/components/kkk.vue'
export default {
  name: 'Home',
  data:()=>({
      tok: "預設值123",
 }),
  components: {
    kkk
  },
  methods:{
  }
}
</script>

kkk.vue

<template>
  <div >
    這是子元件:{{msge}}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data:()=>({
 }),
  props: {
    msge: String
  },
  mounted(){
 
  },
  methods:{

  }
}
</script>

子傳父

step 1

首先我們先創兩個元件about 和 ppp元件並把他們放在相應的資料夾，先在about裡面引入ppp

step 2

切換到ppp，新增一個名為ktop的data，之後在created裡輸入 this.$emit(“top”,this.ktop)，emit算是送出事件的函數，top為此事件的名稱，this.ktop是我們要傳的值。

step 3

在about元件中ppp標籤裡輸入 @top="appear"，@是v-on的縮寫，用來監聽top事件的發生，appear為自定義的函數名稱在監聽到top事件會觸發，之後在methods裡新增appear函數在裡面console.log，就可以達到子傳父元件的效果了

step 4

如果想要動態傳遞效果可以在ppp增加input和button標籤，input用v-model綁定ktop，button觸發emit事件，就可以達到動態傳遞效果

以下是程式碼

about.vue

<template>
  <div class="home">
    <ppp @top="appear" />
      {{onon}}
  </div>
</template>

<script>
/* eslint-disable */
import ppp from '@/components/ppp.vue'
export default {
  name: 'Home',
  data:()=>({
    onon : ""
  }),
  components: {
    ppp
  },
  methods:{
  appear(data){
    console.log(data)
    this.onon=data 
  }
  
  }
}
</script>

ppp.vue

<template>
  <div >
    <input v-model="ktop" type="text">
    <button @click="send">按下候傳到父元件</button>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  name: 'ppp',
  data:()=>({
     ktop:"wantzzzzz"
 }),
  props: {

  },
  methods:{
   send(){
     this.$emit("top",this.ktop)
   }
  }
}
</script>

兄弟互傳

step 1

兄弟元件互傳其實就是父傳子和子傳父的結合，首先我們先創三個元件broa、brob和brother元件並把他們放在相應的資料夾，先在brother裡面引入broa、brob

step 2

在broa裡新增data名稱為age,並在created裡新增一個送出事件，名稱為broatob，值為age

step 3

先在brother元件中，新增一個data名為atob，用來接收broa傳過來的值,再brother元件中broa標籤裡輸入@broatob=”getbro a”，之後在methods裡新增getbroa函數在裡面打 this.atob=data，就能讓atob等於broa傳過來的值了

step 4

在brother元件裡的brob標籤裡打 :msg=”atob” ，就可以把atob送給brob元件了

step 5

在brob元件裡用prop接brother傳來的值，並設定型態，再顯示再畫面上，就能達到broa元件傳到brob元件兄弟互傳的效果了

step 6

如果想要動態傳遞效果可以在broa增加input和button標籤，input用v-model綁定age，button觸發emit事件，就可以達到動態傳遞效果

以下是程式碼

brother.vue

<template>
<div>
    <broa @broatob="getbroa" />
    <brob :msg="atob" />
</div>
</template>

<script>
/* eslint-disable */
import broa from '@/components/broa.vue'
import brob from '@/components/brob.vue'
 
    export default {
        data:()=>({
            atob:""
        }),
        components: {
            brob,broa
         },
         methods:{
             getbroa(data){
                 console.log(data)
                 this.atob = data
             },
         }
    }
</script>

broa.vue

<template>
    <div>
        <input v-model="age" type="text">
        <button @click="send">按下後兄弟傳值</button>
    </div>
</template>

<script>
/* eslint-disable */
export default {
    data:()=>({
          age:"13year"
        }),
    props: {
    },
    methods: {
        send(){
            this.$emit("broatob",this.age)
        }
    },

}
</script>

brob.vue

<template>
<div>
    {{msg}}
</div>

</template>
<script>
/* eslint-disable */
export default {
    props: {
        msg: String
    }
}
</script>