父元件向子元件傳值

• 第一個就是要明白怎麼在父頁面中向子元件中傳值？你可以給子元件傳入一個靜態的值：

• 但我們一般都是需要傳動態的值，所以需要v-bind繫結，當然，你傳的值可以是數字、物件、陣列等等，參見vue官網。

• 第二個就是要知道如何在子元件中接受父頁面傳過來的值，有幾點需要了解：

  • 元件例項的作用域是孤立的。
  • 子元件要顯式的用props選項宣告它預期的資料，如：

// 某個子元件中：
export default {
  props: {
    title: {
      type: String,
      default: 'hello world'
    }
  }
}
 

以上就是單向資料流的一般表現了： 父級 prop 的更新會向下流動到子元件中，但是反過來則不行。

子元件向父元件傳值

那麼我們延伸一下，子元件怎麼向父元件傳值？

1. 基本概念

• 在vue中，父子元件的關係可以總結為prop向下傳遞，事件向上傳遞。父元件通過prop給子元件下發資料，子元件通過事件給父元件傳送資訊。

• 每個Vue例項都實現了事件介面：使用$on(evntName)監聽事件；使用$emit(eventName,optionalPayload)觸發事件。另外，父元件可以在使用子元件的地方直接用v-on來監聽子元件觸發的事件。

2. 舉例說明

• 父元件在元件上定義了一個自定義事件childFn，事件名為parentFn用於接受子元件傳過來的message值。

<!-- 父元件 -->
<template>
    <div class="test">
      <test-com @childFn="parentFn"></test-com>
      <br/> 
      子元件傳來的值 : {{message}}
    </div>
</template>

<script>
export default {
    // ...
    data() {
        return {
             message: ''
        }
    },
    methods: {
       parentFn(payload) {
        this.message = payload;
      }
    }
}
</script>
 

• 子元件是一個buttton按鈕，併為其添加了一個click事件，當點選的時候使用$emit()觸發事件，把message傳給父元件。

<!-- 子元件 -->
<template> 
<div class="testCom">
    <input type="text" v-model="message" />
    <button @click="click">Send</button>
</div>
</template>
<script>
export default {
    // ...
    data() {
        return {
          // 預設
          message: '我是來自子元件的訊息'
        }
    },
    methods: {
      click() {
            this.$emit('childFn', this.message);
        }
    }    
}
</script>

• 這樣我們就基本實現了子元件向父元件傳送值了:

  
  點選send傳送

還可以使用 ref來獲取值，在父元件中引入的子元件標籤上寫ref=‘xx’，然後在父元件中引用時this.$refs.xx即可