emit的用法

emit: 子组件向父组件传值

JS用法

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

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

<template>
  <div>
    <div>$emit子组件调用父组件的方法并传递数据</div>
    <h1>父组件数据：{{msg}}</h1>
    <emit-ch @updateInfo="updateInfo" :sendData="msg"></emit-ch>
  </div>
</template>
<script>
import emitCh from './$emitCh'
export default {
  name: 'emitFa',
  components: { emitCh },
  data () {
    return {
      msg: '北京'
    }
  },
  methods: {
    updateInfo (data) { // 点击子组件按钮时触发事件
      console.log(data)
      this.msg = data.city // 改变了父组件的值
    }
  }
}
</script>

<!-- ==================================================== -->
<template>
 <div class="train-city">
    <h3>父组件传给子组件的数据：{{sendData}}</h3>
    <br/><button @click='select()'>点击子组件</button>
  </div>

</template>

<script>
export default {
  name: 'emitCh', // 相当于一个全局 ID，可以不写，写了可以提供更好的调试信息
  props: ['sendData'], // 用来接收父组件传给子组件的数据
  data () {
    return {
    }
  },
  computed: {
  },
  methods: {
    select () {
      let data = {
        city: '杭州'
      }
      this.$emit('updateInfo', data)// select事件触发后，自动触发updateInfo事件
    }
  }
}
</script>

TS用法

@Emit

<template>
    <div class="container">
        <!-- value需要子组件@Prop定义，这里把驼峰化横线 -->
        <child-com :parent-value="msg"></child-com>
        <!-- 方法一: 驼峰转横线 -->
        <child-com @handle-to-parent1="handleChildValue"></child-com>
        <!-- 方法二: 驼峰转横线. 注意，这里是用test接收的 -->
        <child-com @test="handleChildValue"></child-com>
        <!-- 方法三: 驼峰转横线 -->
        <child-com @handle-to-parent3="handleChildValue"></child-com>
    </div>
</template>
 
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import childCom from "路径";
 
@Component({
    components: {
        childCom    // 声明子组件
    }
})
export default class Parent extends Vue {
    private msg: string = "要传给子组件的值";
    
    private childValue: string = "";
 
    // 处理子组件传过来的值 val：是自定义的
    private handleChildValue(val: string) {
        // val: 子组件传过来的值
        this.childValue = val;
    }
}
</script>

<!-- ============================================== -->
<template>
    <div class="container">
        <!-- 方法一: 直接调用@Emit -->
        <button @click="handleToParent1">向父组件传值</button>
        <!-- 方法二: 直接调用@Emit -->
        <button @click="handleToParent2">向父组件传值</button>
        <!-- 方法三: 间接调用 -->
        <button @click="handleClickEvent">向父组件传值</button>
    </div>
</template>
 
<script lang="ts">
// 引入Emit
import { Component, Vue, Emit } from "vue-property-decorator";
 
@Component
export default class Child extends Vue {
    // 子组件向父组件传的值
    private msg: string = "要传递给父组件的值";
 
 
    // 方法一
    @Emit()    
    private handleToParent1() {
        return this.msg;    // return将要传递的值
    }
 
    // 方法二: 注意，这时父组件接收值时是用@Emit("test")括号中的test接收的，test会把正面的方法名字覆盖。（test）是自定义的
    @Emit("test")    
    private handleToParent2() {
        return this.msg;    // return将要传递的值
    }
 
    // 方法三
    // 先定义父组件接收的方法（同方法一、二）
    @Emit() 
    private handleToParent3() {
        return this.msg;    // return将要传递的值
    }
    private handleClickEvent() {
        // ... 一些其它的操作
        // 然后手动调用传值
        this.handleToParent3();
    }
}
</script>