Vue 2 단일 이벤트 관리 모듈 통신

2623 단어 Vue2vue모듈 통신
본 고 는 vue$emit 와$on 구성 요소 의 통신 을 공유 하 였 으 며,구체 적 인 내용 은 다음 과 같 습 니 다.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8" /> 
 <title>Vue2-          </title> 
 <script src="vue.js"></script> 
 <script type="text/javascript"> 
 
 //           
 var Event = new Vue(); 
 
 //  A 
 var A = { 
  template: ` 
   <div> 
    <span>  A     ->{{a}}</span> 
    <input type="button" value=" A    C" @click = "send"> 
   </div> 
  `, 
  methods: { 
   send () { 
    Event.$emit("a-msg", this.a); 
   } 
  }, 
  data () { 
   return { 
    a: "  a     " 
   } 
  } 
 }; 
 //  B 
 var B = { 
  template: ` 
   <div> 
    <span>  B     ->{{a}}</span> 
    <input type="button" value=" B    C" @click = "send"> 
   </div> 
  `, 
  methods: { 
   send () { 
    Event.$emit("b-msg", this.a); 
   } 
  }, 
  data () { 
   return { 
    a: "  b     " 
   } 
  } 
 }; 
 //  C 
 var C = { 
  template: ` 
   <div> 
    <h3>  C  </h3> 
    <span>    A    : {{a}}</span> 
    <br> 
    <span>    B    : {{b}}</span> 
   </div> 
  `, 
  mounted () { 
   //  A      
   Event.$on("a-msg", function (a) { 
    this.a = a; 
   }.bind(this)); 
 
   //  B      
   Event.$on("b-msg", function (a) { 
    this.b = a; 
   }.bind(this)); 
  }, 
  data () { 
   return { 
    a: "", 
    b: "" 
   } 
  } 
 }; 
 window.onload = function () { 
  new Vue({ 
   el: "#box", 
   components: { 
    "dom-a": A, 
    "dom-b": B, 
    "dom-c": C 
   } 
  }); 
 }; 
 
 
 </script> 
</head> 
<body> 
 <div id="box"> 
  <dom-a></dom-a>  
  <dom-b></dom-b>  
  <dom-c></dom-c>  
 </div> 
 
</body> 
</html>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
Android 파일 읽 기와 쓰기 작업 방법 요약
viewPager+fragment 캐 시 fragment 새로 고침 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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