码迷,mamicode.com
首页 > 其他好文 > 详细

复习一下vue的子父通信

时间:2019-11-13 16:01:49      阅读:69      评论:0      收藏:0      [点我收藏+]

标签:tms   rip   import   strong   数据   span   str   vue   def   

之前一直没太用,等到用的时候就有点迷糊了,百度了一下,总结一下 
 
**子父通信是通过$emit**
    1.给子组件绑定自定义事件@事件名="事件函数"  在事件函数里面通过this.$emit 绑定父组件的事件,再把需要传的值写在里面
    2.在父组件中挂载的子组件上绑定父组件的自定义事件,在这个自定义的事件里面接收子组件传过来的值就可以了
 
***子组件***
<template>  
   <div class="app">
      <input @click="sendMsg" type="button" value="给父组件传递值"> <!--自定义的事件也可以在template里里面写-->
   </div>
</template>
<script>
export default {
    data () {
        return {
            //将msg传递给父组件
            msg: "我是子组件的msg",
        }
    },
     methods:{
         sendMsg(){
             //func: 是父组件指定的传数据绑定的函数,this.msg:子组件给父组件传递的数据
             this.$emit(func,this.msg)
         }
     }
}
<script>
***父组件***
<template>
    <div class="app">
        <child @func="getMsgFormSon"></child>
    </div>
</template>
<script>
import child from ./child.vue
export default {
    data () {
        return {
            msgFormSon: "this is msg"
        }
    },
    components:{
        child,
    },
    methods:{
        getMsgFormSon(data){
            this.msgFormSon = data
            console.log(this.msgFormSon)
        }
    }
}
</script>

 

 

复习一下vue的子父通信

标签:tms   rip   import   strong   数据   span   str   vue   def   

原文地址:https://www.cnblogs.com/Jerry1208/p/11849636.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!