uniapp 中子组件向父组件传递数据

基本用法

父组件注册了一个事件。如 change 事件

<template>
  <view class="">
    <text>父组件+{{fatherVal}}</text>
    <son @change="getSonVal"></son>
  </view>
</template>
<script>
  import son from '@/components/son.vue'
  export default {
    components: {
      son
    },
     data(){
      return{
       fatherVal:''
      }
    },
    methods: {
      getSonVal(e) {
        console.log(e)
        this.fatherVal = e
        ...
      }
    }
  }
</script>

该事件函数 getSonVal() 执行是要等子组件调用 this.$emit 后执行；

<template>
  <view class="">
    <text>子组件</text>
    <input value="sonVal" @input="valChange" />
  </view>
</template>
<script>
  export default {
    name: 'son',
    data(){
      return{
        sonVal:'子组件数据'
      }
    },
    methods: {
      valChange() {
        this.$emit('change',this.sonVal)
        ...
      }
    }
  }
</script>

父组件的函数理解成一个回调函数；

子组件执行函数后将参数返回给父组件，父组件再执行函数。

---

点赞 评论 收藏 ~~ 有疑惑的小伙伴，可能是我表达不清楚，可以留言讨论，如有错误，也希望大家不吝指出。 ~~ 点赞 评论 收藏