javascript - Komponen anak mencetuskan peristiwa tersuai komponen induk, tetapi komponen induk tidak bertindak balas.

Question

Berikut ialah subkomponen @change='showChange' ialah acara subkomponen
Templat berikut didaftarkan sebagai komponen jenis pesanan

<template>
<select name="dType" class="form-control" v-el:select @change='showChange'>
      <option value="" v-if="type=='selectAll'">全部</option>
      <option v-for="branch in branchList" :value="branch.id" track-by="$index">
        {{branch.name}}
      </option>
  </select>
</template>

Berikut adalah kaedah subkomponen:

        showChange(event) {
            for (let branch of this.branchList) {
                if (branch['id'] === event.target.value) {
                    this.$emit('showChange',branch['prefix']);
                }
            }

Berikut ialah komponen induk

<order-type @showChange='alert(2)'></order-type>        

Tetapi alert(2) tidak dilaksanakan

Answer 1

Awak baru tulis macam ni kan?

<order-type @showChange='alertFun'></order-type>     
父组件有一个方法
methods: {
    alertFun () {
        alert(2)
    }
}

Apa yang perlu diluluskan di sini ialah nama fungsi kaedah komponen induk dan bukannya menulis amaran(2) terus

Answer 2

Ini sepatutnya menjadi masalah
<opsyen v-for="branch in branchList" :value="branch.id" track-by="$index">
Gelung untuk dalam objek memperoleh indeks, bukan nilai, jadi branch.id tak dapat, boleh tukar kepada for of

Answer 3

Berikut ialah subkomponen @change='showChange' ialah acara subkomponen
Templat berikut didaftarkan sebagai komponen jenis pesanan

<template>
<select name="dType" class="form-control" v-el:select @change:parentChage='showChange'>

  <option value="" v-if="type=='selectAll'">全部</option>
  <option v-for="branch in branchList" :value="branch.id" track-by="$index">
    {{branch.name}}
  </option>

</select>
</template>

Berikut adalah kaedah subkomponen:

    showChange(event) {
        for (let branch of this.branchList) {
            if (branch['id'] === event.target.value) {
 /注意此行的修改/               this.$emit('parentChage',branch['prefix']);
            }
        }
        
        
        
以下是父组件
<order-type @showChange='alert(2)'></order-type>        
        
 但alert(2) 并未执行