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

Question

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

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

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

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

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

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

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>

供稿

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

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

Vue: Passing a prop to an already embedded component?

javascript

vue.js

vue-props

显示

菜单（猜）

供稿