週二. 8 月 11th, 2020

IT Skills 波林

Polin WEI – 資訊工作者的技術手札

Vue.js 父子組件間的溝通 – $emit / $on

1 min read
ECMAScript 2015 (ES6)

Vue.js 父子組件之間的溝通 – $emit / $on

 

Vue.js 可以透過 自定義事件 this.$emit('myEvent') 來對組件 ( Component ) 之間作溝通

vm.$emit( eventName, […args] )
參數:

{string} eventName
[...args]

vm.$on( event, callback )
Arguments:

{string | Array<string>} event (array only supported in 2.2.0+)
{Function} callback

觸發當前物件 ( Object ) 上的事件。附加引數都會傳給監聽器並回撥 ( callback )。

  • 用途與示例
  1. 父元件可以使用 props 把資料傳給子元件。
  2. 子元件可以使用 $emit 觸發父元件的自定義事件。

 

  • 子組件:

當 Button 有被 Click 時, 會觸發自定義事件 this.$emit('childMethod'); 來供父組件呼叫

<template>
  <button @click="handleClick">Emit</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('childMethod');
    },
  },
};
</script>

 

  • 父組件:

嵌入子組件後, 就可以來對自定義事件 v-on:childMethod , 撰寫一個您想要的函數名稱 Method: parentMethod() 處理您想要處理的作業了

<template>
  <div id="app">
    <child v-on:childMethod="parentMethod"></child>
  </div>
</template>

<script>
import Child from './components/Child';
export default {
  name: 'App',
  components: {
    Child,
  },
  methods: {
    parentMethod() {
      console.log('Hello World');
    },
  },
};
</script>

 

More Stories

Copyright © All rights reserved. | Newsphere by AF themes.