vue學習(一)：組件通信

# 父子組件之間的通信（props down, events up）

1、父組件向子組件傳遞（props down ）

app.vue(父組件)

<template>
  <div id="app">
    <hello :text="msg"></hello>
  </div>
</template>

<script>
import hello from '@/components/hello'
export default {
  name: 'app',
  data (){
    return {
      msg: "I come from parent"
    }
  },
  components:{
    hello
  },

}
</script>

hello.vue(子組件)

<template>
  <div class="hello">
    <button type="button">{{ text }}</button>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: "I come from child"
    }
  },
  props:[ 'text' ]
}
</script>

如圖所示，按鈕顯示的信息來自父組件：

2、子組件向父組件傳遞（events up）

子組件通過this.$emit("事件名"，參數)觸發自定義事件

app.vue(父組件):

<template>
  <div id="app">
    <p>來自子組件的內容：<span>{{ msg}}</span></p>
    <hello @get-msg-from-child="getMsg"></hello>
  </div>
</template>

<script>
import hello from '@/components/hello'
export default {
  name: 'app',
  data (){
    return {
      msg: ""
    }
  },
  components:{
    hello
  },
  methods: {
    getMsg (a){
      this.msg = a;
    }
  }

}
</script>

hello.vue(子組件)：

<template>
  <div class="hello">
    <button type="button" @click="showMsg">點我</button>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: "I come from child"
    }
  },
  methods: {
    showMsg (){
      this.$emit('get-msg-from-child',this.msg)
    }
  }
}
</script>

點擊“點我按鈕”，會顯示獲取到的子組件的內容：

# 非父子組件通信

在簡單的場景下，可以使用一個空的 Vue 實例作為中央事件匯流排； 在複雜的情況下，我們應該考慮使用專門的狀態管理模式.（這裡不涉及）。

bus.js：

import Vue from 'vue'
var bus = new  Vue();
export { bus }

app.vue(含有aaa和bbb組件)：

<template>
  <div id="app">
    <aaa></aaa>
    <bbb></bbb>
  </div>
</template>

<script>
import aaa from '@/components/aaa'
import bbb from '@/components/bbb'
export default {
  name: 'app',
  components:{
    aaa,
    bbb
  }
}
</script>

aaa.vue：

<template>
  <div class="a">
    aaa的輸入框： <input v-model="msg" @keyup="changeMsg">   
  </div>
</template>

<script>
// 引入bus
import {bus} from './bus.js'
export default {
  data () {
    return {
      msg: ""
    }
  },
  methods: {
    changeMsg (){
      // 觸發事件
      bus.$emit("get-aaa-msg", this.msg)
    }
  }
}
</script>

bbb.vue：

<template>
  <div class="b">
    <p>bbb的內容：<span>{{msg}}</span></p>
  </div>
</template>

<script>
import {bus} from './bus.js'
export default {
  data () {
    return {
      msg: ""
    }
  },
  mounted (){
    // 自定義事件
    bus.$on("get-aaa-msg", (msg) => {
      this.msg = msg
    })
  }
}
</script>

顯示結果如下：

當在aaa中輸入內容，會在下麵顯示出來獲取到的數據，如下：