首頁  >  文章  >  web前端  >  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