Quasar의 라우터에 중첩된 자식으로부터의 부모 트리거 메서드(vue)

Quasar의 라우터에 중첩된 자식으로부터의 부모 트리거 메서드(vue)

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")
          }
        ]
      }
    ]
  }

자녀에게 $emit을 사용하여 다음과 같이 부모에게 전달할 수 있습니다.

마이차일드:

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

내 부모:

<MyChild @myEvent="updateMyEvent" />

단, MyChild는 이미 라우터를 통해 표시되어 있기 때문에 부모에게 다시 렌더링하지 않고 부모에게 이벤트를 트리거하고 싶습니다.그래서 저는 좀 더 직접적으로 부모 방법에 접근할 수 있는 방법을 찾고 있습니다.

vue 3에서 이 작업을 수행하는 올바른 구현은 무엇입니까?

---

갱신:

자녀의 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;
  },

결국엔 부모님 댁에서 감시자를 만났죠

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

합니다.stateValue 그 하는 합니다.

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

언급URL : https://stackoverflow.com/questions/67934795/trigger-method-in-parent-from-child-nested-in-router-in-quasar-vue