글로벌 모달 상자 구성 요소

첫째, 프로젝트 디렉토리는 다음과 같습니다 :

 

 둘째, 모달 모델 상자 패키지 그룹 : Modal.vue

<템플릿> 
    <div> 
        <! - -定义全局模态框!> 
        <DIV 클래스 = " MD-모달 모달-MSG MD-모달 전이 MD-쇼 " V-바인딩 : 클래스 = " { 'MD-쇼 'mdShow} " > 
          <DIV 클래스 = " MD-모달 내부 " > 
            <DIV 클래스 = " MD-최고 " > 
             
              <버튼 클래스 = " MD-가까운 " @ 클릭 = " closeModal "> 닫기 </ 버튼> 
            </ DIV>
            <DIV 클래스 = " MD-내용 " > 
              <DIV 클래스 = " 확인 - 팁 " > 
                <슬롯 이름 = " 메시지 " > </ 슬롯> 
              </ DIV> 
              <DIV 클래스 = " BTN-랩 " > 
                <슬롯 이름 = " btnGroup " > </ 슬롯> 
              </ div> 
            </ div> 
          </ div> 
        </ div>
        <DIV의 클래스 = " MD-오버레이 "V- 경우 = " mdShow " @ 클릭 = " closeModal " > </ DIV> 
    </ DIV> 
</ 템플릿> 
<스타일> 

</ 스타일> 
<script> 
수출 기본 ({ 
    소품 : " mdShow " , 
    데이터 ( ) { 
        반환 { 

        } 
    } 
    방법 : { 
        closeModal () { 
            // 触发父组件的가까운事件
            이 . (발광을 $ " 가까운 " ); 
        } 
    } 
})
 </ script>

GoodsList.vue

<V-모달 바인드 : mdShow = " mdShow " V-ON : 사용 닫기 = " closeModal " > 
        <p 형 슬롯 = " 메시지는 " > 
          로그인하거나 쇼핑 카트에 추가 할 수 없습니다주세요! 
        </ P> 
        <div 슬롯 = " btnGroup " > 
          <a 클래스 = "BTN btn--m" href= "javascript:;"   @click= "= mdShow false">에 근접 </a>에 
        </ div> 
      </ 모달> 
      <모달 바인드-V :V-에 닫기 = " closeModal " > 
        <P 슬롯 = " 메시지 " > 
          <SVG 클래스 = " 아이콘 - 상태 - 확인 " > 
            <사용 XMLNS : 인 XLink = " http://www.w3.org/1999/xlink " 인 XLink : HREF = " # 아이콘 - 상태 - 확인 " > </> 사용 
          </ SVG> 
          ! <SPAN>加入购物车成</ SPAN> 
        </ P> 
        <DIV 슬롯 = " btnGroup을 " > 
          <클래스 = " - m BTN BTN " HREF =" 자바 스크립트 :; " @ 클릭 = " mdShowCart을 = 거짓 " >继续购物</a>에 
          <라우터 링크 클래스 = " BTN BTN - m BTN - 빨간색 " HREF = " 자바 스크립트 :; " =에 " / 카트 " >查看购物车</ 라우터 링크> 
        </ div> 
      </ 모달>

문제에 대한 부모 - 자녀 의사 소통, 당신은 볼 수 있습니다은 https : //www.cnblogs.com/sichaoyun/p/6690322.html