javascript - 子組件觸發父組件的自定義事件 父組件無任何反應

問題描述

以下為子組件 @change=’showChange’為子組件事件以下模板注冊為 order-type組件

<template><select name='dType' 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>

以下為子組件方法:

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

以下是父組件

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

但alert(2) 并未執行

問題解答

你直接這么寫有問題的吧應該是

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

這里應該傳遞的是父組件方法的一個函數名，而不是直接寫alert(2)

應該是這塊出問題了<option v-for='branch in branchList' :value='branch.id' track-by='$index'>for in對象循環取得的是索引，不是值，所以取不到branch.id，可以改成for of

以下為子組件 @change=’showChange’為子組件事件以下模板注冊為 order-type組件

<template><select name='dType' 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>

以下為子組件方法:

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) 并未執行