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

【问题标题】：Vue: Passing a prop to an already embedded component?Vue：将道具传递给已经嵌入的组件？
【发布时间】：2020-07-01 03:59:13
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

你能分享你的菜单和饲料组件代码吗
什么是k-bind？

标签： javascript vue.js vue-props

【解决方案1】：

让您的Display 组件保持所选菜单选项的状态。通过 props 将其绑定到您的 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>

饲料

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

【讨论】：