Vue：将prop传递给已经嵌入的组件？

Question

基本上，我有一个“显示”组件，其中有两个嵌入式组件：“菜单”和“进纸”。我希望根据菜单中单击的任意按钮来更新Feed。我可以发出从菜单组件中单击的按钮，但是如何将其传递给已经嵌入在模板标记中的feed组件？

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

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

实际上只是将选项传递到菜单中，以使其生成所需的不同按钮。

我唯一想做的就是在菜单标签中包含v-on:option-clicked = "updateFeed"，以使其在单击按钮后调用updateFeed方法。我不确定如何在此方法中实际更新Feed，这基本上就是我要弄清楚的事情。

我不确定这是否是实现此目标的最佳方法，但是任何帮助将不胜感激！

Answer 1

让您的Display组件保持所选菜单选项的状态。通过道具将其绑定到您的Feed，并在Menu上监听更新事件。 Feed然后可以watch来更改道具。

显示

<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>

Feed

props: ['option'],
methods: {
  updateFeed (selectedOption) {
    // whatever
  }
},
watch: {
  option (selectedOption) {
    this.updateFeed(selectedOption)
  }
}