Vue之 子父组件相互传值

刚学习vue的时候，只知道父组件向子组件传递参数是通过props进行传递的；子组件向父组件传递参数是通过this.$emit()进行传递的。本来以为用处不是很大的，到实际开发的时候真实需要的时候打脸了，这玩意用起来还挺不错的= =，好了，开始写关于父子组件参数的传递。

1.定义子组件

<template>
    <div style="background-color: #f0c78a;width: 400px;height: 50px"  @click="childReply"> <!--通过childReply事件，向父组件传递参数值-->
      child name:{{childName}},money has {{giveMoney}} ,game is {{giveGame}}  <!--展示父组件传过来的参数-->
    </div>
</template>

<script>
    export default {
      name: "ChildrenComp",
      props:['childName','giveMoney','giveGame'],  //注册三个参数，从父组件传递过来
      data(){
        return{}
      },
      methods:{
        childReply(){
          this.$emit('childReply',this.childName+',thank father')  //父组件通过实现这个方法，获得参数值
        }
      }
    }
</script>
<style scoped>
</style>

2.父组件使用子组件

<template>
    <div>
      <ChildrenComp child-name='小名' give-money='200$' give-game="魂斗罗" @childReply="showMsg"></ChildrenComp>  <!--通过实现childReply方法，获得子组件传过来的参数值-->
      <div style="height: 20px"></div>
      <ChildrenComp child-name="小七" give-money="2000￥" give-game="打豆豆" @childReply="showMsg"></ChildrenComp>
    </div>
</template>

<script>
  import ChildrenComp from './ChildrenComp'   //引入子组件
    export default {
        name: "FartherComp",
        components:{ChildrenComp},   //注册子组件
        data(){
          return{}
        },
        methods:{
          showMsg(msg){
            alert(msg)
          }
        }
    }
</script>

<style scoped>

</style>

3.展示效果

页面中两个div就是父组件中的两个子组件，其name、money、game是父组件传递过来的。

当点击其中一个div时，会跳出一个弹出，弹出子组件传给父组件的消息

 github上有我更多的笔记:Raray-chuan (兮川) · GitHub,欢迎stars与following，如果有问题可以在issue中向我咨询

关注我的公众号，获取更多关于后端、大数据的知识