将道具传递给Vuetify和Vue JS中的父项

时间:2019-01-30 17:17:13

标签: vue.js vuetify.js

如何将深色模式值从导航栏(子级)传递到app.vue(父级)?

在导航栏组件中,我有一个启用/禁用暗模式的开关。我想将这些暗数据传递给父级(app.vue),以更改整个应用程序。

谢谢!

1 个答案:

答案 0 :(得分:3)

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

在您的子导航栏组件中,您可以使用一种方法:

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

然后在您的父应用组件中监视该事件:

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

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