将事件从父级传递给子级

Question

我有一个 AppRoot.vue、AppToolbar.vue 和 AppDrawer.vue

当我单击 AppToolbar.vue 中的按钮时，我需要更改 AppDrawer.vue 的 isDrawerOpen 变量，并在 AppRoot.vue 中声明。

我怎样才能做到这一点？谁能帮我？

AppRoot.vue

<template>
    <v-app id="app-root">
        <app-drawer></app-drawer>
        <app-toolbar :title="title"></app-toolbar>
        <v-content>
            <v-container>
                <slot><h1>Não há nada para exibir aqui!</h1></slot>
            </v-container>
        </v-content>
        <app-footer></app-footer>
    </v-app>
</template>

<script>
    export default {
        name: 'app-root',
        props: ['title'],
    }
</script>

应用工具栏.vue

<template>
    <v-toolbar :color="$color" app>

        <v-layout row hidden-md-and-up>
            <v-toolbar-side-icon @click="openDrawer" class="white--text"></v-toolbar-side-icon>
        </v-layout>

        <v-toolbar-title class="white--text" v-text="title"></v-toolbar-title>

    </v-toolbar>
</template>

<script>
    export default {
        name: 'app-toolbar',
        props: ['title'],
        methods: {
            openDrawer() {

            }
        }
    }
</script>

AppDrawer.vue

<template>
    <v-navigation-drawer temporary v-model="isDrawerOpen" absolute>
        <v-list class="pa-1">
            <v-list-tile avatar>
                <v-list-tile-avatar>
                    <img src="https://rafaeldeveloper.com.br/img/rafael_developer.jpg">
                </v-list-tile-avatar>
                <v-list-tile-content>
                    <v-list-tile-title>Rafael de Azeredo</v-list-tile-title>
                </v-list-tile-content>
            </v-list-tile>
        </v-list>
    </v-navigation-drawer>
</template>

<script>
    export default {
        name: 'app-drawer',
        data: () => ({
            isDrawerOpen: false
        })
    }
</script>

Answer 1

首先，您不需要props在 AppRoot.vue 文件中使用属性，当您使用时，它会将道具传递:title="title"给孩子。propsproperty 用于获取子组件中的父组件属性。

对于您的查询，您可以使用事件总线在它们之间进行通信。或者，您可以使用 vuex 进行更好的状态管理。以下是我们如何使用事件总线来实现：

在您的main.js文件中，定义事件中心或您想要的任何文件，但只需确保在导入该文件的组件中事件中心可用。

var eventHub = new Vue();

现在，这将用于您的所有组件。

接下来，您需要发出事件：

应用工具栏.vue

// ...
methods: {
  openDrawer: function () {
    eventHub.$emit('open-drawer', PASS_WHATEVER_YOU_WANT);
  }
}

然后在孩子身上监听发出的事件：

AppDrawer.vue

// ...
created: function () {
  eventHub.$on('open-drawer', this.openDrawer)
},
methods: {
  openDrawer(value) {
    // ... do whatever you want to do with value
    // this.isDrawerOpen = !this.isDrawerOpen
    this.isDrawerOpen = value;
  }
}