Vue - pierwszy komponent

Piszemy pierwszy komponent w projekcie Vue. Musimy się przez to przegryźć, aby do ciekawszych tematów móc się dokopać. Do dzieła.

Ok, tworzymy plik FirstComponent.vue w components i ustalamy zawartość:

<template>
    <div class="green">
      <h1>{{ msg }}</h1>
    </div>
  </template>
  
  <script>
  export default {
    name: 'FirstComponent',
    props: {
      msg: String
    }
  }
  </script>
  
  <style scoped>

  .green {
    color: #42b983;
  }
  </style>

Zakładam że wszystko jasne. W App.vue dodajemy komponent do template:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <FirstComponent msg="My Message" />
</template>

Teraz w tagu script dodajemy import komponentu + dopisujemy do components:

<script>
import HelloWorld from './components/HelloWorld.vue'
import FirstComponent from './components/FirstComponent.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    FirstComponent
  }
}
</script>

Wykonujemy komendę i sprawdzamy, czy działa.

Ok, to był samozamykający się komponent. Teraz dodamy mu slot (swoją drogą podobnie jak template, tag normlanego HTML w wersji 5, komponenty też z HTML5 pochodzą, polecam ogarnąć web components oraz stencil):

<template>
    <div class="green">
      <h1>{{ msg }}</h1>
      <slot></slot>
    </div>
</template>

Ok, teraz robimy jakieś wypełnienie tego slotu w App.vue:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <FirstComponent msg="My Message">
    <p class="green">And this is slot content</p>
  </FirstComponent>
</template>

Odpalamy, działa, w dodatku style łapie nasz slot po swoim komponencie. Z drugiej strony poza komponentem ich nie ma, możemy sprawdzić:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <FirstComponent msg="My Message">
    <p class="green">And this is slot content</p>
  </FirstComponent>
  <p class="green">I dont have green class</p>
</template>

Więcej Vue już niedługo.

Vue – pierwszy komponent