Vue.js组件的通信之子组件向父组件的通信

Posted 焦大叔

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.js组件的通信之子组件向父组件的通信相关的知识,希望对你有一定的参考价值。

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


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

  <template id="childComp">
    <div>I am child component:{{msg}}</div>
  </template>


  <body>


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

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


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


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

以上是关于Vue.js组件的通信之子组件向父组件的通信的主要内容,如果未能解决你的问题,请参考以下文章

将 vue.js 组件子中的对象或值发送到父通信

关于Vue.js组件巨详细的一篇文章

Vue子组件向父组件通信,父组件向子组件通信

Vue 组件&组件之间的通信 之 子组件向父组件传值

Vue中利用$emit实现子组件向父组件通信

vue父子组件之间的通信