Catatan Belajar Vue : Vue Component (2)

Pada tulisan Vue Component waktu itu, template pada component dituliskan dalam bentuk string di properti template. Karena kemarin sudah menggunakan vue-cli dan memasang banyak paket tambahan, penggunaan component menjadi sangat mudah, daripada ditulis dalam bentuk string component dipisahkan dalam bentuk file dengan ekstensi .vue. Contohnya dalam scafolding vue-cli ada App.vue.

Pada catatan kali ini saya ( mungkin kita ) akan bermain-main dengan componentmenggunakan ekstensi .vue ini.

Pertama modifikasi dulu App.vue atau tepatnya dibersihkan dahulu ubah jadi seperti ini.

<template>
  <div>
    Template Kosong
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}
</script>

Sehingga saat menjalankan npm run dev di folder projek, di browser akan memunculkan.

Menambahkan Component

Sekarang mari coba untuk menambahkan component lain di dalam konten tersebut. Agar strukturnya lumayan rapi di dalam folder src bikin aja folder baru namanya componentsmisalnya. Nama bebas sesui keinginan. Di dalam folder tersebut tambahkan satu file baru, saya beri nama Logo.vue, isinya sebagai berikut

<template>
    <div>
        <h1> Logo </h1>
        <img style="height: 150px" v-bind:src="img">
    </div>
</template>
<script>
export default {
    data() {
        return {
            img: 'https://vuejs.org/images/logo.png'
        }
    }
}
</script>

Lalu pada berkas main.js daftarkan component yang baru saja dibuat.

import Vue from 'vue'
import App from './App.vue'
import Logo from './components/Logo.vue'

Vue.component('my-logo', Logo);

new Vue({
  el: '#app',
  render: h => h(App)
})

Sama dengan pada catatan component sebelumnya, bedanya jika pada component sebelumnya setelah penamaan component diisi properti template dengan kontennya string sekarang langsung nama objek component-nya. Terakhir di berkas App.vue tambahkan component yang sudah dibuat.

<template>
  <div>
    Template Kosong
    <hr>
    <my-logo></my-logo>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}
</script>

Sehingga di browser akan menampilkan

Memanggil Component dalam Component

Contoh di atas itu component dipanggil di main.js, yang sekarang berbeda component akan dipanggil oleh component lainnya. Pertama bikin dulu component baru, saya beri nama Form.vue di dalam folder components, isinya seperti berikut.

<template>
  <div>
      <h1> Sebuah Form </h1>
      <input type="text" v-model="title">
      <br>
      
      {{ title }}
      
  </div>
</template>
<script>
export default {
    data() {
        return {
            title : ''
        }
    }
}
</script>

component form ini akan dipanggil bukan dari main.js melainkan dari Logo.vue. Maka ubah kembali berkas Logo.vue menjadi

component form ini akan dipanggil bukan dari main.js melainkan dari Logo.vue. Maka ubah kembali berkas Logo.vue menjadi

<template>
    <div>
        <h1> Logo </h1>
        <img style="height: 150px" v-bind:src="img">
        <hr>
        <my-form></my-form>
    </div>
</template>
<script>

import Form from './Form.vue'

export default {
    data() {
        return {
            img: 'https://vuejs.org/images/logo.png'
        }
    },
    components: {
        'my-form': Form
    }

}
</script>

Maka di browser akan menampilkan

Referensi

https://www.youtube.com/watch?v=FWQSuskE5UA&list=PL55RiY5tL51p-YU-Uw90qQH419BM4Iz07&index=9