Передайте реактивное значение компонента родительскому

#vue.js #vuejs3

Вопрос:

У меня есть этот компонент со слайдером, у меня есть кнопка отправки вне этого компонента, могу ли я каким-то образом передать это значение ответа на время родительскому компоненту, чтобы я мог отправить данные?

 div(v-if="timeConstraint")
 VueSlider(
    v-model="timeAnswer.duration",
    v-bind="sliderOptionsEnd()"
  )
 
     const timeAnswer = reactive({ start: 0, duration: 900 });

 

Ответ №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)
      }
    }
  }
}