子组件向父组件传值

最新推荐文章于 2024-09-26 07:51:19 发布

I'm写代码

最新推荐文章于 2024-09-26 07:51:19 发布

阅读量244

点赞数

分类专栏： Vue 文章标签： vue js

本文链接：https://blog.csdn.net/qq_41497443/article/details/119424747

版权

Vue 专栏收录该内容

23 篇文章 2 订阅

订阅专栏

本文详细介绍了在 Vue.js 框架中如何使用 $emit 和 v-on 事件来实现子组件向父组件传递值的过程。通过实例展示了子组件如何触发一个方法并将自身的状态值传递给父组件，以及父组件如何监听并响应这个事件来更新其状态。

摘要由CSDN通过智能技术生成

子组件向父组件传值

子组件向父组件传值其实用的是$emit来触发父组件方法，父组件用v-on来绑定子组件触发的方法

<template>
  <!--子组件-->
  <div>
    <div>子组件变化之后值传给父组件</div>
    <span>子组件值：</span><button @click="addChildTotal">{{num}}</button>
  </div>
</template>
<script>
  export default {
    name: 'ChildComponent',
    data () {
      return {
        num: 0
      }
    },
    methods: {
      addChildTotal () {
        this.$emit('increment')
        this.num ++
      }
    }
  }
</script>
<style>

</style>

<template>
  <!--父组件-->
  <div>
    <span>父组件值：</span><button>{{ total }}</button>
    <ChildComponent v-on:increment="addFatherTotal"></ChildComponent>
  </div>
</template>
<script>
  import ChildComponent from '../taskOne/index'
  export default {
    name: 'fatherComponent',
    components: {
      'ChildComponent': ChildComponent
    },
    data () {
      return {
        total: 0
      }
    },
    methods: {
      addFatherTotal () {
        this.total++
      }
    }
  }
</script>
<style>

</style>