vue--子组件修改数据传递给父组件_子组件传值父组件再传回去-优快云博客

本文介绍了一个具体的子组件与父组件交互案例，展示了如何通过点击事件触发子组件的方法，并将选择类型和切换内容的操作传递给父组件进行状态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子组件代码：

<span class="block positive" @click="select(2,$event)" :class="{'active':selectType===2}">{{desc.all}}<span class="count">{{ratings.length}}</span></span>
<div class="switch" @click="toggleContent" :class="{'on':onlyContent}">
    <span class="icon-check_circle"></span>
    <span class="text">只看有内容的评价</span>
  </div>

methods: {
    select (type, event) {
      if (!event._constructed) {
        return
      }
      this.$emit('select', type)
    },
    toggleContent (event) {
      if (!event._constructed) {
        return
      }
      this.$emit('toggle')
    }
  }

父组件代码：

<ratingselect @select="selectRating" @toggle="toggleContent" :select-type="selectType" :only-content="onlyContent" :desc="desc" :ratings="food.ratings"></ratingselect>

methods: {
  selectRating (type) {
      this.selectType = type
      this.$nextTick(() => {
        this.scroll.refresh()//实时更新better-scroll的高度，$nextTick异步更新dom
      })
    },
    toggleContent () {
      this.onlyContent = !this.onlyContent
      this.$nextTick(() => {
        this.scroll.refresh()//实时更新better-scroll的高度，$nextTick异步更新dom
      })
    }
}