Vue2.x Component之間進行數據傳遞 與 事件監聽

假設我們有一個父組件是 App.vue，子組件是Header.vue

父組件->子組件

在App.vue中，主要通過在app-header上綁定屬性

<template>
  <div id="app">
    <app-header v-bind:title="title"></app-header>
  </div>
</template>
<script>
import Header from './components/Header'
export default {
  name: 'App',
  data(){
    return {
      title: 'this is my first vue'
    }
  },
  //局部注冊組件
  components: {
    "app-header": Header
  }
}
</script>

在Header.vue中，通過props獲取對應的屬性

export default {
  name: 'Header',
  props: {
      title: {
        type: string,
        required:true
      }
  },
  data () {
    return {
    }
  }
}
</script>

子組件->父組件

子組件使用$emit，第一個參數是事件，第二個是值

<template>
    <div id="header">
        <h1 v-on:click='changeTitle'>{{title}}</h1>
    </div>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      title: 'Godfunc'
    }
  },
  methods: {
      changeTitle:function(){
          this.title = 'i am changed';
          this.$emit('titleChanged',this.title);
      }
  }
}
</script>

父組件觸發事件方法，接收參數

<template>
  <div id="app">
    <app-header  v-on:titleChanged="updateTitle($event)"></app-header>
  </div>
</template>

<script>
import Header from './components/Header'
export default {
  name: 'App',
  data(){
    return {
    }
  },
  methods: {
    updateTitle: function(title){
        this.title = title;
        alert(title);
    }
  },
  //局部注冊組件
  components: {
    "app-header": Header,   
  }
}
</script>

總結：父組件向子組件傳遞數據，是通過子組件的屬性傳遞的；子組件向父組件傳遞數據時，是通過觸發事件。

自定義事件進行組件間通信

父組件中

<template>
  <div>
    <app-header ref="head"></app-header>
  </div>
</template>

<script>
import appHeader from './components/AppHeader.vue'
export default {
  data () {
    return {

    }
  },
  mounted () {
    this.$refs.head.$on('appEvent', this.addSomething)
  },
  methods: {
    addSomething: function (event) {
      alert(event)
    }
  },
  components: {
    'app-header': appHeader
  }
}
</script>

子組件中

<template>
    <div>
        <button @click="click">添加</button>
    </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods: {
    click: function () {
      this.$emit('appEvent', 'test title')
    }
  }
}
</script>

兄弟組件之間通信與之類似

首先需要定義一個公用的 js文件

import Vue from 'Vue'

export default new Vue()

組件一

<template>
    <div>
        <button @click="click">comp1</button>
    </div>
</template>

<script>
import bus from './bus.js'
export default {
  methods: {
    click: function () {
      console.log(bus)
      bus.$emit('comp1Event', 'this is a msg')
    }
  }
}
</script>

組件二

<template>
    <div>
    </div>
</template>

<script>
import bus from './bus.js'
export default {
  mounted () {
    console.log(bus)
    bus.$on('comp1Event', function (params) {
      alert(params)
    })
  }
}
</script>