首页 > 其他 > 详细

子组件给父组件的传值

时间:2020-05-31 19:44:29      阅读:36      评论:0      收藏:0      [点我收藏+]

子组件:

<template>
    <div class="app">
       <input @click="sendMsg" type="button" value="给父组件传递值">
    </div>
</template>
<script>
export default {
 
    data () {
        return {
//将msg传递给父组件
            msg: "我是子组件的msg",
        }
    },
methods:{
sendMsg(){
//func: 是父组件指定的传数据绑定的函数,this.msg:子组件给父组件传递的数据
this.$emit(func,this.msg)
}
}
}
</script>

 


子组件通过this.$emit()的方式将值传递给父组件

注意:这里的func是父组件中绑定的函数名

父组件:

<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>

 


好了,so easy!
————————————————
版权声明:本文为CSDN博主「sdj_beyond」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_38888773/article/details/81902789

子组件给父组件的传值

原文:https://www.cnblogs.com/zhilili/p/13020044.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!