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>