vue关于父子组件之间的传值

最新推荐文章于 2025-11-13 12:19:08 发布

原创最新推荐文章于 2025-11-13 12:19:08 发布 · 499 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue 组件传值 #$emit #props

web前端专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了一个Vue项目中如何实现子父组件间的通信。通过具体实例展示了如何在父组件中初始化子组件的属性，并监听子组件触发的事件。同时介绍了如何在子组件内更新状态并通知父组件。

1.新建一个子组件，在父组件中引入并使用，传入initNum为10给子组件

父组件中
引入：   import clickCounter from ''
注册：   components: {clickCounter}
使用：   <clickCounter :initNum="10" @clicknum="handleClicknum">
             使用solt插槽时写在这          
         </clickCounter>

2.子组件接收值

接收值
props: {// 父组件传过来的值的集合（父传子）
    initNum: { // initNum为字段名
      type: Number,// 字段类型
      default: 0
    }
  }

放在data中使用
 data () {
    return {
      num: this.initNum
    }
  },

子传父

1.子传父用$emit

  this.$emit('clicknum', {// 父组件可以监听到这个方法(子传父)
        num: this.num //传入的值
      })

2.父监听接收

监听子组件传值的方法@clicknum
<clickCounter :initNum="10" @clicknum="handleClicknum">
     

</clickCounter>


 methods: {
    handleClicknum (data) {
      console.log(data.num)
    }
  }

全部代码

index父组件：

<template>
  <div class="container">
 
<clickCounter :initNum="10" @clicknum="handleClicknum">
        <input type="checkbox" /> 禁用

</clickCounter>
  </div>
</template>
<script>
import clickCounter from '@/components/click-counter'

export default {
  data () {
    return {
     
    }
  },
  components: {clickCounter},
  methods: {
   
    handleClicknum (data) {
      console.log(data.num)
    }
  }
}
</script>

<style scoped>
 
</style>

2.子组件click-counter.vue

<template>
  <div class="click-counter">
    <div class="counter-num">次数：{{num}}</div>
    <button class="counter-btn" @click="handleClick">点我呀！</button>
    <button class="counter-reset-btn" @click="handleResetClick">清零</button>
    <slot></slot><!-- 使用插槽,子组件挖了个坑,父组件去填（填入的是界面） -->
  </div>
</template>

<script>

export default {
  props: {// 父组件传过来的值的集合（父传子）
    initNum: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      num: this.initNum
    }
  },

  methods: {
    handleClick () {
      this.num += 1
      this.$emit('clicknum', {// 父组件可以监听到这个方法(子传父)
        num: this.num
      })
    },
    handleResetClick () {
      this.num = 0
    }
  }
}
</script>

<style>
.click-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid red;
  background-color: #ffffff;
  padding: 10px;
}

.counter-num,
.counter-btn,
.counter-reset-btn {
  flex: 1;
  margin: 3px;
}
</style>

插槽：另外slot插槽是在子组件中插入的位置中写slot标签，然后在父组件的子组件里面插入界面