vue子组件调用父组件怎样传参数

栗子分解

子组件child通过$emit调用父组件分方法来传递数据。
主要是讲解子组件调用父组件的方法并传递数据的栗子，组件内容从简：父子组件都是一个带标题的按钮
子组件

<template>
  <button @click="emitEvent">我是子组件</button>
</template>
<script>
  export default {
    data() {
      return {
        msg: "我是子组件中的数据"
      }
    },
    methods: {
      emitEvent(){
        this.$emit('my-event', this.msg)
        console.log('点击我')
        //通过按钮的点击事件触发方法，然后用$emit触发一个my-event的自定义方法，传递this.msg数据。
      }
    }
  }
</script>

父组件

<template>
  <div id="app">
    <child2 @my-event="getMyEvent"></child2>
    <button>{{name}}</button>
    <!--父组件中通过监测my-event事件执行一个方法，然后取到子组件中传递过来的值-->
  </div>
</template>
<script>
  import child2 from './child2.vue'
  export default {
    components: {
      child2
    },
    data(){
        return{
            name:'我是父组件'
        }
    },
    methods: {
      getMyEvent(msg){
          console.log('接收的数据--------->'+msg)//接收的数据--------->我是子组件中的数据
          this.name=msg
      }
    }
  }
</script>

解析

子组件通过$emit监听父组件中的事件函数，当子组件触发监听函数则会吧msg作为返回值传给父组件从而达到监听传值的效果。其中第一个参数是父组件被监听的函数，第二个参数为返回父组件的值或函数(‘my-event’, this.msg)

总结

$emit 都使得其父子 之间形成了一个单向下行绑定：子组件传的值会通过监听函数返回给父组件。