1

基本上，我有一个“显示”组件，它有两个嵌入式组件，“菜单”和“提要”。我希望我的提要根据菜单中单击的任何按钮进行更新。我能够发出从我的菜单组件单击的按钮，但是我将如何将它传递给已经嵌入我的模板标签中的提要组件？

显示组件模板部分看起来像这样

<template>
   <div>
       <Menu k-bind:options="options"/>
       <Feed/>
   </div>      
</template

选项实际上只是传递到菜单中，只是为了让它生成不同的所需按钮。

我唯一能想到的就是v-on:option-clicked = "updateFeed"在 Menu 标记中添加一个按钮，让它在单击按钮后调用 updateFeed 方法。我不确定如何在这种方法中实际更新提要，这基本上就是我想要弄清楚的。

我不确定这是否是实现此功能的最佳方法，但我们将不胜感激！

4

1 回答 1

2

让您的Display组件保持所选菜单选项的状态。将其绑定到您的Feedvia 道具并在Menu. Feed然后可以观察道具的变化。

展示

<Menu :options="options" @option-clicked="option = $event"/>
<Feed :option="option" />

data: () => ({
  options: [/* whatever */],
  option: null // holds the selected menu option
})

菜单（猜测）

<button 
  v-for="option in options"
  @click="$emit('option-clicked', option.value)"
>{{ option.label }}</button>

喂养

props: ['option'],
methods: {
  updateFeed (selectedOption) {
    // whatever
  }
},
watch: {
  option (selectedOption) {
    this.updateFeed(selectedOption)
  }
}
于 2020-07-01T04:13:58.727 回答