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

49次阅读

共计 388 个字符,预计需要花费 1 分钟才能阅读完成。

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

正文完
 0