>  기사  >  웹 프론트엔드  >  하위 구성요소에서 상위 구성요소(코드)로 Vue.js 구성요소 통신

하위 구성요소에서 상위 구성요소(코드)로 Vue.js 구성요소 통신

高洛峰
高洛峰원래의
2017-03-12 11:36:431290검색

이 글에서는 Vue.js 컴포넌트의 하위 컴포넌트에서 상위 컴포넌트(코드)까지의 통신을 소개합니다.

<!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title>componentChildToParentCommunication</title>
    <script src="js/vue.js"></script>
  </head>

  <template id="parentComp">
    <p>
      I am parent component:{{msg}},The Data from child:{{msg1}},{{msg2}}
      <hr>
      <child :m1="msg1" :m2="msg2"></child> 
    </p>
  </template>
  <template id="childComp">
    <p>I am child component:{{msg}}</p>
  </template>

  <body>

  <script>
    let child={
      template:&#39;#childComp&#39;,
      data(){
        return {
          msg:&#39;child Data&#39;
        }
      },
      props:[&#39;m1&#39;,&#39;m2&#39;]
    };

    let parent={
      template:&#39;#parentComp&#39;,
      data(){
        return {
          mgs:&#39;parent Data&#39;,
          msg1:&#39;the first parent Data&#39;,
          msg2:&#39;the second parent Data&#39;
        }
      },
      components:{
        child
      },
    };

    window.onload=function(){ 
      new Vue({
        el:&#39;#app&#39;,
        components:{
          parent
        }
      });
    }

    /*子元素向父元素通信关键总结:
      1:子元素定义时props:[&#39;msg1&#39;,&#39;msg2&#39;,&#39;msg3&#39;,...],用来放置从父元素拿过来的数据
      2:在嵌套的子元素(使用时)上:<child  :msg1="父数据1" :msg2="父数据2" :msg3="父数据3"></child>;
    */
  </script>
    <p id="app">
      <parent></parent>
    </p>
  </body>
</html>


위 내용은 하위 구성요소에서 상위 구성요소(코드)로 Vue.js 구성요소 통신의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.