@eldenhard2

Как разработать компонент– кнопку счётчик, значение которой увеличивается на 1 по клику?

Требуется разработать компонент CounterButton – кнопку счётчик, значение которой увеличивается на 1 по клику.

Единственный входной параметр компонента: count, значение счётчика (число, по умолчанию 0);
Компонент выводит кнопку с текущим значением счётчика;
При клике компонент порождает событие обновления параметра count директивой v-model со значением на 1 больше текущего

export default defineComponent({
  name: 'CounterButton',

  // Компонент должен иметь входной параметр и порождать событие
  props: ['count'],
  template: `<button type="button" :count="counter">1</button>`,
  data() {
    return {
      count: 0
    }
  },
  methods: {
    counter() {
      count += 1
    }
  }
});


App.js
import { defineComponent } from './vendor/vue.esm-browser.js';
import CounterButton from './CounterButton.js';

export default defineComponent({
  name: 'App',

  components: {
    CounterButton,
  },

  data() {
    return {
      count: undefined,
    };
  },

  template: `
    <div class="sample container">
      <p>count = {{ count }}</p>
      <p>
        <CounterButton :count="count" @update:count="count = $event" />
      </p>
      <p>
        <CounterButton v-model:count="count"></CounterButton>
      </p>
      <p>
        <CounterButton v-model:count="count"></CounterButton>
      </p>
    </div>
  `,
});
  • Вопрос задан
  • 79 просмотров
Решения вопроса 1
Aetae
@Aetae
Тлен
export default defineComponent({
  name: 'CounterButton',
  props: {
    count: {
      type: Number,
      default: 0
    }
  },
  template: `<button type="button" @click="counter++">{{counter}}</button>`,
  emits: ['update:count'],
  setup(props, context) {
    const innerCounter = ref(props.count);
    watch(() => props.count, (value) => innerCounter.value = value);
    return {
      counter: computed({
        get: () => innerCounter.value,
        set: (value) => context.emit('update:count', innerCounter.value = value)
      })
    }
  }
})
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы