parent 来自 child 的触发方法嵌套在 Quasar (vue) 的路由器中

Question

我使用 Quasar 框架 (vue 3) 在我的路由器中获得了带有嵌套路由的结构：

const routes = [
  {
    path: "/",
    component: () => import("layouts/myLayout.vue"),
    children: [
      {
        path: "",
        component: () => import("pages/Main.vue"),
        children: [
          {
            path: "",
            component: () => import("components/Sub.vue")
          }
        ]
      }
    ]
  }

我知道我可以在我的 child 中使用 $emit 像这样传递给 parent：

我的孩子：

  this.$emit("myEvent", "hello world");

我的父母：

<MyChild @myEvent="updateMyEvent" />

但是我想在 parent 中触发一个事件而不在 parent 中再次渲染 MyChild 因为它已经通过路由器显示了......所以我正在寻找一种访问方式parents 方法可以说更直接。

在 vue 3 中执行此操作的正确实现是什么？

更新：

我在child中更新vuex的方法：

  this.updateValue(JSON.parse(JSON.stringify(myValue)));

Store.js

vuex:
const state = {
  value: 0
};

const actions = {
  updateValue({ commit }, payload) {
    commit("updateMyValue", payload);
  },

const mutations = {
  updateMyValue(state, payload) {
    state.myValue = payload;
  },
};

const getters = {
  getValue: state => {
    return state.value;
  },

我实际上在 parent 中的 getter 上有了一个观察者：

  computed: {
    ...mapGetters("store", ["getValue"]) // module and name of the getter
  },
  watch: {
    getValue(val) {
      console.log("MY VALUE: " , val);
    }

Answer 1

在子父组件中定义一个名为 stateValue 的计算属性，它基于存储状态值，然后观察它以触发该事件：

computed:{
   stateValue(){
     return this.$store.state.value;
   }
},
watch:{
    stateValue(val){
     this.updateMyEvent()// trigger the method
   }
}

parent 来自 child 的触发方法嵌套在 Quasar (vue) 的路由器中

trigger method in parent from child nested in router in Quasar (vue)

vue.js

vuex

vue-router

vuejs3

vuex4