组件传值之子传父

问题1,为什么使用$emit触发函数
因为子组件不能直接修改父组件的数据

问题2,子传父的思路过程
通过在父组件中定义一个自定义事件绑定在父组件定义的一个函数方法,通过在子组件使用this.$emit方法触发在父组件的函数方法并传值到父组件

---

父组件页面

<template>
  <div>
    <!-- 子组件在父组件中注册使用 -->
    <!-- @fn='add'(自定义事件绑定一个函数方法) -->
    <MyComp2Child :num='num' @fn='add'></MyComp2Child>
  </div>
</template>

<script>
methods:{
    // val是接收子组件传过来的数据
    add(val){
      this.num+=val
    }
</script>

---

子传父页面

methods:{
    // 通过this.$emit('事件名',函数传参给父组件)
add(){
  this.$emit('fn',5)
}
  }