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