vue 구성 요소 값 전달 방식, 부모 자식, 부모, 형제 사이 및 Vuex 값 전달 코드 구현 포함

7477 단어 vuejavascriptes6
vue 어셈블리 간 값 전달 방법
1.1 부모 어셈블리에서 서브어셈블리로 값 전달
  • parent.vue에 서브어셈블리를 도입한 후 서브어셈블리의 라벨에 값 전달 방식:msg="msgToChild"을 추가하고 서브어셈블리에서 정의msg 속성은 서브어셈블리에서 전달된 값을 수신합니다.
    • //    


import MChild from "./Child";
export default {
  data() {
    return {
      msgToChild: "from parent msg to child o",
    };
  },
  components: {
    MChild
  }
};
  • 서브어셈블리에서 정의props된 수신 서브어셈블리의 값은 다음과 같습니다. 
    • //    


export default {
  props: {
    //   msg  ，          
    msg: {
      type: String,
      default: ""
    }
  }
};

    부모 구성 요소는 this.$children[0].childmsg 또는 this.$refs.child.childmsg 을 통해 서브 구성 요소의 속성을 얻을 수 있으며, 전가 형식도 Function일 수 있다.
    1.2 서브어셈블리에서 모 피쳐로 값 전달
  • 서브어셈블리에서 클릭 이벤트를 정의하고this.$emit는 트리거 이벤트의 이름과 트리거 이벤트가 전달되는 값을 정의하여 부모 구성 요소에서 감청하고 수신합니다.
    • //    


import bus from "../utils/bus";
export default {
  methods: {
    passMsg() {
      //                  ，          
      this.$emit("showMsg", "i am msg from child");
    }
  }
};
  • 부모 구성 요소에서 정의된 방법으로 서브 구성 요소가 전달하는 값을 수신
    • 


import MChild from "./Child";
export default {
  data() {
    return {
      msg: ""
    };
  },
  components: {
    MChild
  },
  methods: {
    // msgfromchild               
    showMsg(msgfromchild) {
      //             
      this.msg = msgfromchild;
    }
  }
};

    1.3 비 모/자 어셈블리 전송 값
  • 하나 만들기bus.js, bus.js 중 하나 만들기Vue 실례
    • import Vue from "vue";
export default new Vue();
  • App에서 Child까지 값을 전달해야 한다. 먼저 App에 bus를 도입하고 bus에 트리거 이벤트
    • 를 정의한다.
    // App
    //모 어셈블리 가져오기
    import MParent from "./views/Parent";
    //비 모/자 어셈블리 전송 값
    import bus from "./utils/bus";
    export default {
    name: "App",
    components: {
    MParent
    },
    methods: {
    passMsg() {
    //bus에서 트리거 이벤트 정의
    bus.$emit("msg", "I am from app");
    }
    }
    };
  • 구성 요소child에서 수신
    • 


import bus from "../utils/bus";
export default {
  data() {
    return {
      childmsg: "      this.$children    "
    };
  },
  mounted() {
    //                
    bus.$on("msg", msgfromapp => {
      this.childmsg = msgfromapp;
    });
  }
};

    1.4(PubSubJS 라이브러리) 메시지 구독 및 게시 방법 전달
  • 설치PubSubJS
    npm install --save pubsub-js
  • 발표할 구성 요소에 발표
    

<!-- 1.   PubSub -->
import PubSub from 'pubsub-js'
export default {
  data() {
    return {
      //         ，                
      msgfromPubpublish: "msgfromPubpublish"
    };
  },
  methods: {
    //     
    pubsubmsg() {
      // publishmsg        ，         ，this.msgfromPubpublish     
      PubSub.publish("publishmsg", this.msgfromPubpublish);
    }
  }
};
  • 메시지를 받아야 하는 구성 요소에서 메시지를 구독
    

import PubSub from "pubsub-js";
import Diff from "./Diff";
export default {
  data() {
    return {
      childmsg: "  msg"
    };
  },
  
  mounted() {
    //     ，publishmsg           ，msgfromPubpublish     ，                ，         this
    //                   ，            ，  bus    
    PubSub.subscribe("publishmsg", (msg, msgfromPubpublish) => {
      console.log(msgfromPubpublish);
      this.childmsg = msgfromPubpublish;
    });
  }
};
    • 1.5 Passthroughvuex로 어셈블리에서 값 전달Vuex는 Vue.js 응용 프로그램 개발을 위한 상태 관리 모델이다.중앙 집중식 스토리지 관리 애플리케이션의 모든 구성 요소의 상태를 적용하고 적절한 규칙으로 상태를 예측 가능한 방식으로 변경합니다.
  • 설치vuex
    npm install vuex --save
  • 하나count를 만들고 초기state, getters 대상과 일부mutation, actions: 
    export default {
  state: {
    count: 0
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  },
  mutations: {
    //   method，  commit    
    add(state) {
      state.count++;
    },
    decrese(state) {
      state.count--;
    }
  },
  actions: {
    delayadd(context) {
      setTimeout(() => {
        //   context commit  mutations    
        context.commit("decrese");
        console.log("decrese double");
      }, 1000);
    }
  }
};
  • 생성store, 직접 획득count 및 모듈식 명명
    import Vue from "vue";
import Vuex from "vuex";
import count from "@/store/count";
Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    count
  }
});
  • main.js에 vuex를 도입하여 store부터 Vue까지 마운트
    import store from '@/store/store'

new Vue({
  el: "#app",
  router,
  store,
  components: { App },
  template: ""
});
  • 구성 요소에서 상태 가져오기
    import { mapState, mapGetters } from "vuex";
export default {
  computed: {
    ...mapState({
      // count: "count"
      //      
      count: state => state.count.count
    }),
    ...mapGetters(["doubleCount"])
    // doubelCount() {
    //   return this.$store.getters.doubleCount;
    // }
  },
  // computed: mapState({
  //   count: "count"
  // }),
  data() {
    return {
      msgToChild: "from parent msg to child o",
      msg: "",
      msgfromPubpublish: "msgfromPubpublish"
    };
  },
  methods: {
    showMsg(msgfromchild) {
      this.msg = msgfromchild;
    },
    //        ...mutations  
    add() {
      //   commit  mutations
      this.$store.commit("add");
      //   dispatch  actions
      // this.$store.dispatch("delayadd");
    }
  }
};
    • 상기 몇 가지 방식을 통해 대부분의 상황에서 구성 요소의 값을 전달하는 문제를 기본적으로 해결할 수 있다.​
    애플 리 케 이 션 ID 설정
    SpringBoot 프로젝트 JSon 의 빈 값 처리,null 을 빈 문자열 로 바 꾸 기",빈 list 를 빈 배열 로 바 꾸 기 등

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage