실무 프로젝트 및 솔루션에서 발생하는 기록 VUE 문제

주요 기사는 내가 쉽게 찾기 위해, 모든 후 실제 프로젝트의 개발에서 발생 VUE로 기록되고 쉽게 내가 실제 프로젝트에서 다음 코드를 붙여 넣습니다, 문제와 해결 방법으로 실행하는 블로그.

당신은 더 나은 솔루션 방명록 댓글이있는 경우

핸드 오버 값 .tab 표시되지

변경 전 코드 (독립적 인 코드가 제거 된), 다음 앞뒤로 탭, 구성 요소 세부 사항 (서식있는 텍스트 구성 요소를) 전환 값이 표시되지 않습니다

<템플릿>
  <엘 - 탭 = 탭을 클릭 @ "activeName"= "handleClick"모델을 V>
    <엘 탭 창 라벨 = "세부 사항"이름 = "exactlyInfo">
       <정확히-정보 V-바인드 = "$ 바인드합니다"> </ 정확히-정보>
    </ 엘 - 탭 창>
    <엘 탭 창 : 라벨 = "changeLogTitle"이름 = "변경 로그">
        <연결 유지>
            <성분 (REF)은 = "변경 로그"V는 바인드 ","변경 로그 "이다 = </ 성분> //动态组件>
        </ 연결 유지>
    </ 엘 - 탭 창>
  <EL-탭 />
</ 서식>
<script>
CONST exactlyInfo 결의 = => ([ './ exactlyInfo.vue'] 해결) // 외부 도입 수단 리치 텍스트 구성 요소를 필요
CONST 변경점 결의 = => ([ './ changeLog.vue'] 해결) // 외부 도입 수단을 필요
수출 기본 {
    데이터 () {
        반환 {
            activeName 'exactlyInfo'
            exactlyInfo,
            변경 로그,
        };
    },
    구성 요소 : {
        '정확히-정보'exactlyInfo
    },
    
    방법 : {
        handleClick (탭 이벤트) {// 탭에는 대응하는 스위치 어셈블리
            스위치 (tab.name) {
            경우 'exactlyInfo'
                this.exactlyInfo = exactlyInfo;
                단절;
            경우 '변경 내역'
                this.changeLog = 변경점
                단절;
            }
        }
    }
};
</ script>

수정 된 코드

<템플릿>
  <엘 - 탭 = 탭을 클릭 @ "activeName"= "handleClick"모델을 V>
    <엘 탭 창 라벨 = "세부 사항"이름 = "exactlyInfo">
       <정확히-정보 V-바인드 = "$ attrs에"V-IF = "isShowExactlyInfo"> </ 정확히-정보>

    </ 엘 - 탭 창>
    <엘 탭 창 : 라벨 = "changeLogTitle"이름 = "변경 로그">
        <연결 유지>
            <성분 (REF)은 = "변경 로그"V는 바인드 ","변경 로그 "이다 = </ 성분> //动态组件>
        </ 연결 유지>
    </ 엘 - 탭 창>
  <EL-탭 />
</ 서식>
<script>
CONST exactlyInfo 결의 = => ([ './ exactlyInfo.vue'] 해결) // 외부 도입 수단 리치 텍스트 구성 요소를 필요
CONST 변경점 결의 = => ([ './ changeLog.vue'] 해결) // 외부 도입 수단을 필요
수출 기본 {
    데이터 () {
        반환 {
            activeName 'exactlyInfo'
            exactlyInfo,
            변경 로그,

isShowExactlyInfo : 사실,


        };
    },
    구성 요소 : {
        '정확히-정보'exactlyInfo
    },
    
    방법 : {
        handleClick (탭 이벤트) {// 탭에는 대응하는 스위치 어셈블리
            스위치 (tab.name) {
            경우 'exactlyInfo'
                this.exactlyInfo = exactlyInfo;

this.isShowExactlyInfo 사실 = // 新增

                단절;
            경우 '변경 내역'
                this.changeLog = 변경점

　　　　　　　　　　this.isShowExactlyInfo = 거짓 // 新增

                단절;
            }
        }
    }
};
</ script>

해결책 : 숨겨진 경우의 V-VUE 제어 컴포넌트 재 렌더링 성분의 효과를 얻을

상위 조립 방법이 수행되기 전에 II. 메소드 조립체는 조립체 수신 부모 요소에서 생성 된 비어있다.

해결 방법 : 기본적으로 숨겨져으로 V-경우 VUE 할 상위 페이지, 상위 페이지 초기화 다시 코드에 직접 표시 완료

<템플릿>
    <DIV V-IF = "isShowPage "> 
      <아이 - 구성 요소 : 데이터 = "parentData은"> </ 어린이 구성 요소> // 하위 구성 요소가 자신의 구현 방법과 수명주기가 상위 구성 요소하기 전에 수행 할 수있다,이 시간 parentData가 비어 
    </ DIV> 
</ 템플릿> 
<스크립트> 내보내기 기본 {    데이터 () {          {reutrn을            isShowPage을 : false로 ,

           parentData : {}

         } 
    } 
    마운트 () { 이 본 .init ()} 
    방법 { 
      초기화 () {// 초기화 방법 
        this.parentData = {이름 '부모' } // 값 전달 조립체 부모 성분 
        이 본 .isShowPage를 = true로        }      } } </ SCRIPT>

실무 프로젝트 및 솔루션에서 발생하는 기록 VUE 문제

추천