vue中$emit方法的使用方式

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

{string} eventName
[...args]
触发当前实例上的事件。附加参数都会传给监听器回调。

子组件使用 $emit 触发父组件的自定义事件。子组件代码：

<template>
  <div id="sub-form">
      <form>
          <input type="submit"  value="调用"  v-on:click="runParentM">
    </form>
  </div>
</template>

<script>
export default {
  name: 'SubForm',
  data:function(){
      return{
          textToTranslate:'',
      }
  },
  methods: {
      runParentM: function(e){
          this.$emit('runParent', 'test'); //父组件需要传入runParent
          e.preventDefault();
      }
  }
}
</script>
<style></style>

父组件：

<template>
  <div id="app">
      <h1>测试子组件</h1>

      <TranslateForm v-on:runParent='alertText'></TranslateForm>
  </div>
</template>

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

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

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

补充知识点：

 

vue 设置属性时，如果是设置对像的属性，对象指针未变，则页面不会刷新

<el-table
      :data="pageResult.content"
      style="width: 100%" align="left">
      <el-table-column
        prop="id"
        label="id"
        width="180">
</el-table>        
执行：this.pageResult.content = res.data //页面不会刷新
执行：this.pageResult = {content:res.data}; //页面刷新