Rumah  >  Artikel  >  hujung hadapan web  >  Vue.js组件的通信之子组件向父组件的通信(代码)

Vue.js组件的通信之子组件向父组件的通信(代码)

高洛峰
高洛峰asal
2017-03-12 11:36:431290semak imbas

这篇文章介绍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>


Atas ialah kandungan terperinci Vue.js组件的通信之子组件向父组件的通信(代码). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn