Emit在vue中不会升级父组件中的属性

Question

emit工作了，我可以在vue开发工具中看到。但是父元素中的属性不会升级。

子组件:

<template>
<div>
<ul>
<li v-for="(option, index) in options" :key="index" @click="selectOption(index)">
{{ option }}
</li>
</ul>
</div>
</template>
<script>
export default {
name: "Dropdown",
props: {
options: {
type: Array,
},
},
data() {
return {
value: "",
}
},
methods: {
selectOption(id) {
this.value = this.options[id];
this.$emit("clickedOption", this.value);
}
}
}
</script>

父组件:

<button v-on:clickedOption="selectRole($event)">Select Role</button>
methods: {
selectRole(value) {
this.role = value.payload;
},

函数selectRole似乎没有被执行。

Answer 1

我必须给父元素一个emit函数，像这样:

<Dropdown :options="roleOptions" v-show="dropdownToggle" @clickedOption="selectRole($event)"></Dropdown>