关于vue.js:组件传值之子传父

问题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)
}
  }

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理