Что такое компоненты и приведите пример?vue-25

<template>
  <button
    @click="increment"
    :class="{ 'active': isActive }"
  >
    Счёт: {{ count }}
  </button>
</template>

<script>
export default {
  name: 'CounterButton',
  props: {
    initialCount: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      count: this.initialCount,
      isActive: false
    }
  },
  methods: {
    increment() {
      this.count++
      this.isActive = !this.isActive
      this.$emit('count-changed', this.count)
    }
  }
}
</script>

<style scoped>
button {
  padding: 8px 16px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
}
button.active {
  background: #35495e;
}
</style>

<template>
  <div>
    <h1>Пример приложения</h1>
    <CounterButton
      :initial-count="5"
      @count-changed="handleCountChange"
    />
  </div>
</template>

<script>
import CounterButton from './CounterButton.vue'

export default {
  components: {
    CounterButton
  },
  methods: {
    handleCountChange(newCount) {
      console.log('Новое значение счётчика:', newCount)
    }
  }
}
</script>

export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() { this.count++ }
  }
}

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const increment = () => count.value++

    return { count, increment }
  }
}

import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}

import { createApp } from 'vue'
import App from './App.vue'
import MyComponent from './MyComponent.vue'

const app = createApp(App)
app.component('MyComponent', MyComponent)
app.mount('#app')