Почему бы не обновить значение в родительском компоненте, которое я передал в дочерний компонент, и при обновлении использовать пользовательское событие $emit Vue 3?

Родительский компонент. У меня есть такое значение, как startValue в основном компоненте, и я передаю как реквизит starValue в компонент настроек. Все в порядке, и реквизиты тоже прошли хорошо, но я не могу обновить startValue с помощью пользовательского события в компоненте «Настройки» (дочерний компонент). Почему?

<template>
<div>
  <span>Main</span>
  <SettingsBoard :max="maxValue" :start="startValue" @update="startValue = $event"/>
</div>
</template>

<script>
import {ref} from 'vue'
import SettingsBoard from "@/components/SettingsBoard";

export default {
name: "Main",
  components: {
    SettingsBoard
  },

  setup() {
    const startValue = ref(1)
    const maxValue = ref(2);

    return {
      startValue,
      maxValue
    }
  },

}
</script>

Дочерний компонент

<template>
  <div>
    <h3>Settings board</h3>
    <div>
      <span>start value</span>
      <label>
        <input :value="start" @input="onChangeStart"  type="number" step="1" min="0">
      </label>
    </div>
    <div>
      <h1>{{start}}</h1>
    </div>
  </div>
</template>

<script>

export default {
  name: "SettingsBoard",
  props: {
    start: {type: Number, required: true},
    max: {type: Number, required: true},
  },
  setup() {

    const onChangeStart = (event) => {
      this.$emit('update: start', event.target.value)
    }




    return {strong text
      onChangeStart,
    }
  },
}
</script>

javascript vue.js vuejs3 vue-component portal
person Almaz Atun    schedule 30.10.2020    source источник
comment
где определить strong text? этот синтаксис дает ошибку   -  person Boussadjra Brahim    schedule 30.10.2020

Ответы (1)


arrow_upward
1
arrow_downward

Используйте v-model для синхронизации значений реквизита между компонентами.

Родитель

<SettingsBoard :max="maxValue" v-model:start.number="startValue" />

SettingsBoard (ребенок)

export default {
  name: 'SettingsBoard',

  props: {
    start: { 
      // Do [Number, String] to support multiple types, 
      // otherwise you'll have to cast it to number with the .number modifier.
      type: Number, 
      required: true 
    },
    max: { type: Number, required: true }
  },

  setup(props, { emit }) {
    const onChangeStart = (event) => {
      // Cast this target.value to number or use .number modifier 
      // since it's expecting a number
      emit('update:start', event.target.value)
    }

    return {
      onChangeStart
    }
  }
}

Рекомендации:

person Yom T.    schedule 30.10.2020
comment
Большое спасибо за ваш ответ @Yom S.!!! - person Almaz Atun; 03.01.2021