一.事件

關於什麼是JavaScript事件可以參考：https://www.w3schools.com/js/js_events.asp

二.$emit

vue中對$emit的定義見：

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

• 引數：

  • {string} eventName
  • [...args]

  觸發當前例項上的事件。附加引數都會傳給監聽器回撥。

三.用途與示例

1.父元件可以使用 props 把資料傳給子元件。

1.子元件可以使用 $emit 觸發父元件的自定義事件。

子元件：

<template>
 

  <div id="translate-form">
      <form>
          <input type="text" v-model="textToTranslate" placeholder="輸入需要翻譯的內容">
          <select>
              <option value="en">English</option>
          </select>
          <input type="submit"  value="翻譯"  v-on:click
 
="formSubmit">
    </form>
  </div>
</template>

<script>
export default {
  name: 'TranslateForm',
  data:function(){
      return{
          textToTranslate:'',
      }
  },
  methods: {
      formSubmit: function(e){
          this.$emit('formSubmit', this.textToTranslate); 
 
//父元件監聽的名字必須是formSubmit
          e.preventDefault();
      }
  }
}
</script>

<style>

</style>

父元件：

<template>
  <div id="app">
      <h1>線上翻譯</h1>
    <h5>簡單 / 易用 / 便捷</h5>
   <TranslateForm v-on:formSubmit='translateText'></TranslateForm>
  </div>
</template>

<script>
import TranslateForm from './components/TranslateForm'

export default {
  name: 'App',
  components:{
      TranslateForm
  },
  methods:{
      translateText:function(text){
          alert(text)
      }
  }
}
</script>

<style>
#app {
    text-align: center;
}
</style>

當點選子元件的翻譯的時候，會將輸入的內容彈框：

四.參考資料

[1]https://blog.csdn.net/sllailcp/article/details/78595077

[2]VUE api:https://cn.vuejs.org/v2/api/#vm-emit