1. 程式人生 > >vue.js元件傳值

vue.js元件傳值

新建child.vue,在App.vue中新增:

<child fatherCall="where are you , my son"></child>
import child from './components/child'
components: {
    child
  }

這樣App.vue是child.vue的父元件,可以看到,在child標籤中:fatherCall=”where are you , my son”,fatherCall是我們希望傳遞到child的,它的值為“where are you , my son”。

在child.vue中如何去接受fatherCall呢?vue中使用了props,在child.vue中新增程式碼:

props:["fatherCall"]

這樣,fatherCall可以在child.vue中隨時使用,通過this.fatherCall訪問。

如果傳遞的值是一個物件,如:

fatherMgs:[
          {
              index: 1,
              mgs: "this the first mgs"
          },
          {
            index: 2,
            mgs: "this the second mgs"
          },
          {
            index
: 1, mgs: "this the third mgs" }, ]

這時需要用到v-bind:

<child  v-bind:fatherMgs="fatherMgs"></child>

同樣child.vue中通過props接受資料:

props:["fatherMgs"]

迴圈讀取fatherMgs

<li v-for="item in fatherMgs">{{item.index}}.{{item.mgs}}</li>

2.子元件向父元件傳值
主要使用vue中的emit,官方解釋:觸發當前例項上的事件。附加引數都會傳給監聽器回撥。反正看不懂什麼意思,直接拿來用。
首先在child.vue中新增程式碼:

<button v-on:click="sendMgsToFather">發訊息給父親</button>

當點選按鈕時,呼叫函式sendMgsToFather:

sendMgsToFather:function () {
        this.$emit("listenToChild","I'm watching TV")
    }

這時可以理解為child.vue,告訴App.vue,我觸發了listenToChild事件,引數值為“I’m watching TV”。
這時App.vue中的child.vue元件為:

<child v-on:listenToChild="listenToChildFun"></child>

表示當出發時間listenToChild時,會呼叫函式listenToChildFun,引數就是之前傳過來的I’m watching TV”。

listenToChildFun:function (childCall) {
      //處理...
    }