Vue - 子选择触发父方法

Question

我正在尝试在下拉项更改时调用父方法。这个概念看起来像这样：

父.vue

<template>
  <child ref="someRef">
</template>
...
methods: {
  doSomething() {
    // use someRef.selectedItems and variables in the parent.vue class to perform logic
  },
}

Child.vue

<template>
  <v-select v-model="selectedItems" @change="doSomething" />
<template>

如何正确地将其连接在一起，以便子项中的下拉选择触发父项方法？这是否是 emit / vuex / 或其他东西的明确案例？

Answer 1

我会在这里使用发射。 （至少我不会为了这个问题而添加 Vuex，尽管我通常在几乎每个应用程序中都使用它。）

在您的子组件的 doSomething 处理程序中，使用所选值发出一个事件：

this.$emit('selected', value)

在你的父组件中，连接一个监听子事件：

<child @selected="onSelected">

将onSelected(value) 添加到您的方法中。每当子组件发出事件时都会调用它。