元件開發中難免會遇到子元件父元件之間以及兄弟元件之間的傳值問題。

1、父元件傳值給子元件：

如果父元件需要將placeholder值傳給子元件，則在父元件標籤中定義：placeholder="XXX",子元件在data中定義props:['placeholder']來接受，這樣接收過來的placeholder就可以直接用this.label取出使用。

注意：props屬性只可以取出使用，並不能改變其值。

父元件中：

<inputText :placeholder="control.placeholder"></inputText>

子元件中：

 <input type="text" v-model="modelValue" :placeholder="placeholder">
 

export default {
    data() {
      return {
        modelValue:'',
      }
    },
    props:['placeholder'],
}

2、子元件傳值給父元件：

如果子元件需要將input輸入框的值傳給父元件，則子元件中定義觸發事件v-on:blur="change"(這裡用的是失去焦點觸發)，在change事件中使用$emit來傳值，父元件中定義方法來接受即可，如下

子元件中：

<input type="text" v-model="modelValue" :placeholder="placeholder" v-on:blur="change">
 

change方法：

change(){
    const self = this;
    self.$emit('transferParamSelect',{value:self.modelValue});
}

父元件中：

<inputText :placeholder="control.placeholder"  v-on:transferParamSelect="getParamSelect($event)"></inputText>

getParamSelect(msg){   
   console.log(this.msg.value);   // 獲取子元件傳值結果
}
 

3、兄弟元件之間傳值。

首先需要定義一個vue引入檔案Hub.js

import Vue from 'vue'
export default new Vue()

兩個需要傳值的元件都同時引入Hub.js

import Hub from '../js/hub'

元件A:

Hub.$emit('change',{value:self.modelValue}) //$emit觸發監聽方法,將value傳至B元件

元件B:

 Hub.$on('change',function(msg){
   console.log(msg.value);
 })  

123123