iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 16
0
自我挑戰組

與Vue相遇系列 第 16

Day016-Component組件-傳值(props和$emit)

Vue:我們透過組件,來模塊化我們的功能。我知道你很好奇,到底如何從根模塊,傳值給組件,使組件可以渲染資料於table中,對吧?如果,仔細觀察昨天的程式碼,你會發現,子組件裡面,我們使用了props屬性,並定義了recorddata來定義從根模塊data裡面的record資料~
今天,我們就來好好看一下,資料的傳遞是如何運行:

在組件資料傳遞中,最重要:了解關係(例如:父傳子、子傳父、組件之間互傳)。一旦確認好關係好,我們才能決定用什麼方法傳值。

當然,在vue中,有很多方法可以相互傳值,這裡就舉一個最典型vue的方法(prop和$emit):

https://ithelp.ithome.com.tw/upload/images/20200930/20130654vRnkYbNR6p.jpg

  • 父傳子:

利用props,就如同就如同基本帳務系統範例一樣,將資料傳給table渲染,為了更加清楚,我們首先看一下這個範例:
https://ithelp.ithome.com.tw/upload/images/20200930/20130654X6NOl6hjeG.jpg

當父層區塊輸入時,能夠帶動子層區塊顯示父層所傳入的值,父層我們利用inputContnet來儲存輸入框資料:

const vm = new Vue({
        el: '#app',
        data() {
            return {
                inputContent: ""
            }
       },
 })

在子層部分可以分幾個步驟將資料傳遞:

  1. 利用props屬性,命名取得父層變數名,這邊我取名為accept:
props: ["accept"]
  1. 在子層顯示區塊,利用v-model綁定accept資料:
<p>接收父層內容:{{accept}}</p>
  1. 回到父層,在模組化的子組件標籤上,透過v-bind綁定資料:
<childBlock :accept="inputContent"></childBlock>

完成後,如下:
https://ithelp.ithome.com.tw/upload/images/20200930/20130654GVBuumjY7R.jpg
記得:props用在向下階層,屬於單向傳遞資料。如果要將資料從子層傳入父層,請使用$emit。

  • 子傳父:

子傳父也可以分為以下步驟:

  1. 子層輸入框綁定@input="方法名稱",透過方法並且$emit使用來傳值:
<input type="text" placeholder="請輸入傳遞資料" v-model="inputFromChild" @input="sendToParent">
  1. 子層寫入方法$emit:
methods: {
            sendToParent() {
                this.$emit("value-update", this.inputFromChild)
          }
}
emit帶入兩個參數,一個為傳遞方法,另一個是所要傳遞的值(亦為子層輸入框的值)。
  1. 將$emit傳遞的方法綁定在子組件模塊上,並透過子組件方法,新增父組件方法:
<childBlock :accept="inputContent" @value-update="getValFromChild"></childBlock>
  1. 父層資料可以新增一個變數,專門用來接收子層,並且透過步驟3聯絡父層方法引入:
data() {
      return {
                inputContent: "",
                inputValFromChild: ""
            }
        },
        methods: {
            getValFromChild(val) {
                this.inputValFromChild = val;
            }
}
  1. 在父層顯示區塊,這邊一樣用v-model來做接收顯示:
<div class="view">
       <h2>顯示區域</h2>
       <p v-model="inputContent">父層傳輸內容:{{inputContent}}</p>
       <p style="color:#fff">接收子層內容:{{inputValFromChild}}</p>
</div>

完成後,就可以看到如下畫面:
https://ithelp.ithome.com.tw/upload/images/20200930/20130654E0xuakiusv.jpg

範例程式碼:

https://codepen.io/pen/?template=BaKerKj

Vue:組件傳值,這裡只是其中一種方法。當然還有其他選擇,就看你怎麼使用嚕~

待續......


上一篇
Day015-Component組件-基本帳務系統實例
下一篇
Day017-Vue Router介紹(一)基本介紹
系列文
與Vue相遇30

尚未有邦友留言

立即登入留言