将组件反应值传递给父级

【问题标题】：Pass component reactive value to parent将组件反应值传递给父级
【发布时间】：2021-09-07 09:40:40
【问题描述】：

我有这个带有滑块的组件，我在这个组件之外有一个提交按钮，我可以通过某种方式将这个 timeAnswer 值传递给父组件，以便我可以提交数据吗？

div(v-if="timeConstraint")
 VueSlider(
    v-model="timeAnswer.duration",
    v-bind="sliderOptionsEnd()"
  )

    const timeAnswer = reactive({ start: 0, duration: 900 });

【问题讨论】：

标签： vue.js vuejs3

【解决方案1】：

您可以将计算属性与 getter/setter 一起使用：

  <vue-slider v-model="sliderValue" />

export default
{
  props:
  {
    modelValue:
    {
      type: Number,
      default: 0
    }
  },
  computed:
  {
    sliderValue:
    {
      get()
      {
        return this.modelValue
      },
      set(val)
      {
        this.$emit('update:modelValue', val)
      }
    }
  }
}

【讨论】：