Question

我使用Vuetify在仪表板中创建了几个组件（example code）。如您所见，我有一个工具栏组件：

Vue.component('toolbar', {                                     
  template: '
    <v-toolbar>
      <v-toolbar-side-icon @click="$emit('toggle')"></v-toolbar-side-icon>
      <v-toolbar-title>Application</v-toolbar-title>
    </v-toolbar>' 
});

我希望能够单击此工具栏以关闭抽屉组件，因此我为其发出了一个事件：@click="$emit('toggle')"

然后，抽屉组件使用@toggle侦听该事件以交换v-model=drawer的布尔值：

Vue.component('drawer', {                
  template: '
    <v-navigation-drawer v-model="drawer" @toggle="drawer=!drawer" app>
    ...
    </v-navigation-drawer>',
  data() {   
    return { drawer: true } 
  }   
});

但是，点击切换不会更改v-model的值。为了使Vuetify组件工作，我需要能够更改v模型值，我不认为我可以使用计算属性，所以我猜这可以使用Vuex。

处理这些组件之间通信的最简单方法是什么？

Answer 1

需要做一些改变：

在呈现drawer: true组件的根实例上添加属性drawer，将其作为道具传递给drawer组件

    new Vue({
      el: '#app',
      data: {
         drawer: true
      }
      
    })

<强>模板

<drawer :drawer="drawer"></drawer> // pass drawer as props

接收抽屉组件中的drawer道具，并将其设置为v-model的{{1}}
```
<v-navigation-drawer>
```
您正在从Vue.component('drawer', { template: ` <v-navigation-drawer clipped fixed app v-model="drawer"> ... </v-navigation-drawer>`, props: { drawer: Boolean, source: String } });组件中发出事件。因此，您应该在toolbar组件上添加事件侦听器，而不是toolbar组件。
```
drawer
```

以下是更新后的代码集：https://codepen.io/anon/pen/aYVYzQ?editors=1010#anon-login

在Vue中通过组件之间传递v模型更改的简单方法

1 个答案: