在Vuetify和Vue JS中将道具传递给父母

Posted 2021-03-30

如何将黑暗模式值从导航栏（子）传递到app.vue（父级）？

在我的导航栏组件中，我有一个开关来启用/禁用暗模式。我想将那些黑暗的数据传递给父（app.vue）以更改整个应用程序。

谢谢！

答案

您可以使用Vue的自定义事件界面。 https://vuejs.org/v2/guide/components-custom-events.html

在您的子导航栏组件中，您可以使用以下方法：

handleThemeChange: function (mode) {
    this.$emit('handle-theme-change', { mode });
}

然后在您的父App组件中监视该事件：

<App v-on:handle-theme-change="handleThemeChange" />

然后你的应用程序组件可以有一个实际处理更改的方法handleThemeChange。应用程序组件中的handleThemeChange方法将接受该对象作为参数。