vue中组件之间相互通信（一）

最新推荐文章于 2024-07-22 21:47:11 发布

weiqiang_gg

最新推荐文章于 2024-07-22 21:47:11 发布

阅读量328

点赞数

文章标签： vue中组件之间相互通信一

本文链接：https://blog.csdn.net/weiqiang_gg/article/details/79025314

版权

一、父子组件之间相互通信

父组件：

 
  <template> 
 
  <div 
   id= 
  "parent" 
  > 
 
  <h1>父级组件 
  </h1> 
 
  <button 
   @click=" 
  sendMsg" 
  >给子组件传递参数 
  </button> 
 
  <child 
   :msg=" 
  msg" 
  ></child> 
 
  </div> 
 
  </template> 
 
  <script 
  > 
 
  import 
   Child 
  from 
   '../components/Child' 
 
  export 
   default { 
 
  components:{ 
  Child}, 
 
  data(){ 
 
  return{ 
 
  msg: 
  null, 
 
   } 
 
   }, 
 
  methods:{ 
 
  sendMsg 
  : 
  function(){ 
 
  this. 
  msg = 
  'this is a parent msg' 
 
   } 
 
   } 
 
   } 
 
</script>
子组件：
 
   <template> 
  
   <div 
   id= 
   "child" 
   > 
  
    这是子组件：从父组价中传递过来的信息 
   <br>{{ 
   msg}} 
  
   </div> 
  
   </template> 
  
   <script 
   > 
  
   export 
   default { 
  
   props:[ 
   'msg'] 
  
    } 
  
   </script> 
  
二、子父组件之间相互通信
父组件：
 
   <template> 
  
   <div 
   id= 
   "parent" 
   > 
  
   <h1>父级组件 
   </h1> 
  
   <child 
   @updateParent=" 
   updateParent" 
   ></child> 
  
   </div> 
  
   </template> 
  
   <script 
   > 
  
   import 
   Child 
   from 
   '../components/Child' 
  
   export 
   default { 
  
   components:{ 
   Child}, 
  
   methods:{ 
  
   updateParent 
   : 
   function( 
   data){ 
  
   console. 
   log( 
   data) 
  
    } 
  
    } 
  
    } 
  
   </script> 
  
子组件：
 
   <template> 
  
   <div 
   id= 
   "child" 
   > 
  
   <button 
   @click=" 
   sendAAAAA" 
   >子传父 
   </button> 
  
   </div> 
  
   </template> 
  
   <script 
   > 
  
   export 
   default { 
  
   data(){ 
  
   return{ 
  
   aaaaa: 
   'this is a Child msg' 
  
    } 
  
    }, 
  
   methods:{ 
  
   sendAAAAA 
   : 
   function(){ 
  
   this. 
   $emit( 
   'updateParent', 
   this. 
   aaaaa) 
  
    } 
  
    } 
  
    } 
  
   </script> 
  
 以上内容是最近在看过vue的API使用之后的自己理解