[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-cats-ngidenet":3,"blog-detail-ngidenet-belajar-vuejs-component":20},{"items":4},[5,9,13,17],{"name":6,"slug":7,"count":8},"Digital Marketing","digital-marketing",41,{"name":10,"slug":11,"count":12},"Programming","programming",56,{"name":14,"slug":15,"count":16},"Tips","tips",75,{"name":18,"slug":19,"count":8},"Web Development","web-development",{"id":21,"slug":22,"title":23,"short_text":24,"excerpt":24,"cover":25,"cover_image":25,"cover_alt_text":25,"category":18,"tags":26,"published_at":27,"created_at":28,"full_text":29,"meta_title":25,"meta_description":30,"faqs":31,"images":32,"views_count":33},450,"belajar-vuejs-component","Belajar Vue.Js: Cara komunikasi antar components","Dalam VueJs, kita bisa memecah tampilan yang besar menjadi beberapa komponen kecil yang memiliki UI\u002Ftampilan dan fungsinya sendiri-sendiri. Namun dengan memecah tampilan menjadi beberapa komponen akan",null,[],"2021-02-27T16:00:00Z","2026-07-14T04:39:40.636323Z","\u003Cp>Dalam VueJs, kita bisa memecah tampilan yang besar menjadi beberapa komponen kecil yang memiliki UI\u002Ftampilan dan fungsinya sendiri-sendiri.\u003C\u002Fp>\u003Cp>Namun dengan memecah tampilan menjadi beberapa komponen akan muncul masalah bagaimana cara komunikasi antar komponen ini?\u003C\u002Fp>\u003Cp>Oleh karena itu, pada tutorial ini kita akan membahas beberapa cara component bisa berkomunikasi dengan yang lainnya.\u003C\u002Fp>\u003Ch4>Daftar Isi:\u003C\u002Fh4>\u003Ch2>Komunikasi Parent ke Child\u003C\u002Fh2>\u003Cp>Untuk berkomunikasi dari parent component ke child component, kita bisa menggunakan \u003Ccode>props\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>\u003Ccode>props\u003C\u002Fcode> memberikan kita jalan satu arah dari parent ke child. Tapi tidak bisa sebaliknya.\u003C\u002Fp>\u003Cp>Untuk memberikan data ke child, parent bisa menambahkan argument di deklarasi child component.\u003C\u002Fp>\u003Cpre>\u003Ccode><template>\n    <div>\n        <ChildComponent message=\"Hello\" ><\u002FChildComponent> <!-- props message dengan static content -->\n        <ChildComponent :message=\"msg\" ><\u002FChildComponent> <!-- props message dengan dynamic content -->\n    <\u002Fdiv>\n<\u002Ftemplate>\n<script>\nimport ChildComponent from '.\u002FChildComponent'\nexport default {\n    name: 'ParentComponent',\n    components: {\n        ChildComponent\n    },\n    data: function () {\n        return {\n            msg: 'Hello World!'\n        };\n    },\n};\n<\u002Fscript>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Dari contoh di atas, di ChildComponent akan menerima sebuah \u003Ccode>props\u003C\u002Fcode> dengan nama \u003Ccode>message\u003C\u002Fcode>. Parent bisa memberikan data ke ChildComponent lewat \u003Ccode>props\u003C\u002Fcode> tersebut.\u003C\u002Fp>\u003Cp>Lalu bagaimana cara ChildComponent menerima data dari parent?\u003C\u002Fp>\u003Cpre>\u003Ccode><template>\n    <div>\n        {{ message }}\n    <\u002Fdiv>\n<\u002Ftemplate>\n<script>\nexport default {\n    name: 'ChildComponent',\n    props: {\n        message: String\n    },\n    data: function () {\n        return {\n         \n        };\n    },\n};\n<\u002Fscript>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Nah dari kode diatas, dapat kita lihat bahwa untuk menangkap \u003Ccode>props\u003C\u002Fcode> dari parent, kita perlu membuat sebuah props object dengan field \u003Ccode>message\u003C\u002Fcode> dan tipe datanya \u003Ccode>String\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>Kamu bisa pakai langsung \u003Ccode>props\u003C\u002Fcode> message untuk di render.\u003C\u002Fp>\u003Cp>Jadi itulah cara memberikan data dari parent component ke child component dengan menggunakan \u003Ccode>props\u003C\u002Fcode>\u003C\u002Fp>\u003Ch2>Komunikasi Child ke Parent\u003C\u002Fh2>\u003Cp>Bagaimana caranya jika Child component ingin memberikan data ke parent?\u003C\u002Fp>\u003Cp>Kita akan menggunakan \u003Ccode>this.$emit\u003C\u002Fcode> yang bisa gunakan untuk memanggil function di parent.\u003C\u002Fp>\u003Cpre>\u003Ccode><template>\n    <div>\n        {{ message }}\n        <button @click=\"callParent\" >Call<\u002Fbutton>\n        \n    <\u002Fdiv>\n<\u002Ftemplate>\n<script>\nexport default {\n    name: 'ChildComponent',\n    props: {\n        message: String\n    },\n    data: function () {\n        return {\n         \n        };\n    },\n    methods: {\n        callParent(){\n            this.$emit('callFromChild');\n        }\n    }\n};\n<\u002Fscript>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Kita sudah buat method \u003Ccode>callParent\u003C\u002Fcode> dimana saat dipanggil akan memanggil event \u003Ccode>callFromChild\u003C\u002Fcode> di parent component.\u003C\u002Fp>\u003Cp>Bagaimana caranya?\u003C\u002Fp>\u003Cp>Kita update dulu parent component.\u003C\u002Fp>\u003Cpre>\u003Ccode><template>\n    <div>\n        <ChildComponent message=\"Hello\" v-on:callFromChild=\"eventFromChild\"><\u002FChildComponent> <!-- pakai directive v-on: -->\n        <ChildComponent :message=\"msg\" @callFromChild=\"eventFromChild\" ><\u002FChildComponent> <!-- atau pakai @ -->\n    <\u002Fdiv>\n<\u002Ftemplate>\n<script>\nimport ChildComponent from '.\u002FChildComponent'\nexport default {\n    name: 'ParentComponent',\n    components: {\n        ChildComponent\n    },\n    data: function () {\n        return {\n            msg: 'Hello World!'\n        };\n    },\n    methods: {\n        eventFromChild(){\n            alert('Call From Child.')\n        }\n    }\n};\n<\u002Fscript>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Jadi untuk menangkan emit dari child, kita bisa menggunakan directive \u003Ccode>v-on:\u003C\u002Fcode>. Jadi bisa dituliskan \u003Ccode>v-on:nama-emit\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>Contohnya seperti directive \u003Ccode>v-on:callFromChild\u003C\u002Fcode> akan memanggil method \u003Ccode>eventFromChild\u003C\u002Fcode> di parent.\u003C\u002Fp>\u003Cp>Oh ya bagaimana caranya jika ingin memberikan variable\u002Fdata dari child ke parent?\u003C\u002Fp>\u003Cp>Caranya dengan menambahkan parementer saat emit.\u003C\u002Fp>\u003Cpre>\u003Ccode>this.$emit('callFromChild', param1, param2, param3);\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Kemudian di parent component, untuk mengambil parameter yang dikirim adalah dengan menambahkan params di methodnya saja.\u003C\u002Fp>\u003Cpre>\u003Ccode>eventFromChild(param1, param2, param3){\n    alert('Call From Child.')\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Kamu sudah bisa memanggil event dan memberikan data dari child component ke parent component.\u003C\u002Fp>\u003Ch2>Komunikasi Antar Component\u003C\u002Fh2>\u003Cp>Untuk berkomunikasi antar component lain yang tidak memiliki hubungan parent & child, kita tidak bisa menggunakan \u003Ccode>props\u003C\u002Fcode> dan \u003Ccode>emit\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>Solusinya adalah dengan menggunakan \u003Ccode>event-bus\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>\u003Ccode>event-bus\u003C\u002Fcode> bisa dikatakan sebagai globa event yang bisa diakses di semua component.\u003C\u002Fp>\u003Cp>Caranya adalah buat sebuah file dengan nama \u003Ccode>event-bus.js\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>Isi dengan code dibawah ini:\u003C\u002Fp>\u003Cpre>\u003Ccode>import Vue from 'vue';\nexport const EventBus = new Vue();\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Kamu tinggal import file \u003Ccode>event-bus.js\u003C\u002Fcode> disetiap component yang memakai event tersebut.\u003C\u002Fp>\u003Cp>Misalnya kita pakai \u003Ccode>event-bus\u003C\u002Fcode> di child component.\u003C\u002Fp>\u003Cpre>\u003Ccode><template>\n    <div>\n        {{ message }}\n        <button @click=\"callParent\" >Call<\u002Fbutton>\n        \n    <\u002Fdiv>\n<\u002Ftemplate>\n<script>\nimport { EventBus } from '.\u002Fevent-bus'\nexport default {\n    name: 'ChildComponent',\n    props: {\n        message: String\n    },\n    data: function () {\n        return {\n         \n        };\n    },\n    methods: {\n        callParent(){\n            EventBus.$emit('callFromChild');\n        }\n    }\n};\n<\u002Fscript>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Dan di parent component, untuk menangkap event tersebut caranya seperti di bawah ini.\u003C\u002Fp>\u003Cpre>\u003Ccode><template>\n    <div>\n        <ChildComponent message=\"Hello\" ><\u002FChildComponent> \n        <ChildComponent :message=\"msg\" ><\u002FChildComponent>\n    <\u002Fdiv>\n<\u002Ftemplate>\n<script>\nimport {EventBus} from '.\u002Fevent-bus'\nimport ChildComponent from '.\u002FChildComponent'\nexport default {\n    name: 'ParentComponent',\n    components: {\n        ChildComponent\n    },\n    data: function () {\n        return {\n            msg: 'Hello World!'\n        };\n    },\n    mounted: {\n        EventBus.$on('callFromChild', function(){\n            alert('Call From Child.')\n        })\n    }\n};\n<\u002Fscript>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Event Bus biasanya cukup digunakan jika skala aplikasi yang dibuat tidak terlalu besar. Jika kalian sedang membuat aplikasi yang cukup kompleks dan perlu komunikasi antar component maka lebih baik memakai \u003Ccode>vuex\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>Kalau kalian ingin belajar tentang vuex, bisa baca artikel ini: Tutorial Vuejs : Kenalan dengan Vuex, Tutorial State Management di Vue Js\u003C\u002Fp>\u003Cp>Jadi itulah beberapa cara komunikasi antar component di dalam vuejs. Semoga artikel ini bisa bermanfaat ya.\u003C\u002Fp>","Dalam VueJs, kita bisa memecah tampilan yang besar menjadi beberapa komponen kecil yang memiliki UI\u002Ftampilan dan fungsinya sendiri-sendiri. Namun dengan memecah",[],[],0]