vue.js 組件之間如何?資料傳遞？

標籤：

組件是 vue.js  最強大的功能之一，而組件執行個體的範圍是相互獨立的，這就意味著不同組件之間的資料無法相互引用。如何傳遞資料也成了組件的重要知識點之一。本文和大家分享的就是vue.js  組件之間傳遞資料相關內容，一起來看看吧，希望對大家 學習vue.js有所協助。 組件組件與組件之間，還存在著不同的關係。父子關係與兄弟關係（不是父子的都暫稱為兄弟吧）。 父子組件父子關係即是組件 A  在它的模板中使用了組件  B ，那麼組件  A  就是父組件，組件  B  就是子組件。//  註冊一個子組件 Vue.component(’child’, { data: function(){ text: ’ 我是 father 的子組件！ ’} template: ’{{ text }}’})//  註冊一個父組件 Vue.component(’father’, { template: ’’  //  在模板中使用了 child 組件})直接使用 father  組件的時候：<div id="app">    <father></father></div>頁面中就會渲染出  ：我是father 的子組件！father  組件在模板中使用了  child  組件，所以它就是父組件， child  組件被使用，所以  child  組件就是子組件。 兄弟組件兩個組件互不引用，則為兄弟組件。Vue.component(’brother1’, {    template: ’<div> 我是大哥 </div>’})Vue.component(’brother2’, {    template: ’<div> 我是小弟 </div>’})使用組件的時候：<div id="app">    <brother1></brother1>    <brother2></brother2></div>頁面中就會渲染出  ：我是大哥我是小弟 Prop子組件想要使用父組件的資料，我們需要通過子組件的 props  選項來獲得父組件傳過來的資料。以下我使用在  .vue  檔案中的格式來寫例子。 如何傳遞資料在父組件 father.vue  中引用子組件  child.vue ，把  name  的值傳給  child  組件。<template>    <div class="app">        // message  定義在子組件的  props  中        <child :message="name"></child>    </div></template><script>    import child from ’./child.vue’;    export default {        components: {            child        },        data() {            return {                name: ’linxin’            }        }    }</script>在子組件 child.vue  中的  props  選項中聲明它期待獲得的資料<template>    <span>Hello {{message}}</span></template><script>    export default {        //  在  props  中聲明擷取父組件的資料通過  message  傳過來        props: [’message’]    }</script>那麼頁面中就會渲染出：Hello linxin 單向資料流當父組件的 name  發生改變，子組件也會自動地更新視圖。但是在子組件中，我們不要去修改  prop 。如果你必須要修改到這些資料，你可以使用以下方法：方法一：把 prop  賦值給一個局部變數，然後需要修改的話就修改這個局部變數，而不影響  propexport  default { data(){newMessage: null},props: [’message’],created(){ this.newMessage =  this.message;}}方法二：在計算屬性中對 prop  進行處理 export  default { props: [’message’],computed{newMessage(){return this.newMessage + ’  哈哈哈 ’;}}} 自訂事件prop  是單向綁定的：當父組件的屬性變化時，將傳導給子組件，但是不會反過來。修改子組件的  prop 值，是不會傳回給父組件去更新視圖的。那麼子組件要如何去與父組件通訊呢？那就是自訂事件。通過在父組件 $on(eventName)  監聽自訂事件，當子組件裡  $emit(eventName) 觸發該自訂事件的時候，父組件執行相應的操作。比如在父組件中控制一個彈框子組件的顯示，在子組件中按下關閉之後，告訴父組件去隱藏它，然後父組件就執行操作隱藏彈框。<template>    <div class="app">        // hide  為自訂事件，名字可以自己隨便起，不能有大寫字母，可以使用虛線        // @hide  監聽子組件觸發  hide  事件，則會執行  hideDialog  方法        <dialog :is-show="show" @hide="hideDialog"></dialog>        <button @click="showDialog"> 顯示彈框 </button>    </div></template><script>    import dialog from ’./dialog.vue’;    export default {        components: { dialog },        data() {            return {                show: false            }        },        methods: {            showDialog() {                this.show = true;            },            hideDialog() {                this.show = false;            }        }    }</script>在子組件 dialog.vue  中：<template>    <div class="dialog" v-show="isShow">        <p> 這裡是彈框子組件 </p>        <button @click="toHide"> 關閉彈框 </button>    </div></template><script>    export default {        //  駝峰式命名的  prop  需要轉換為相對應的虛線隔開式  is-show        props: [’isShow’],        methods: {            toHide(){                // $emit  方法觸發父組件的監聽事件                this.$emit(’hide’);            }        }    }</script>這樣就實現了父子組件之間的相互連訊。 Vuex上面的例子都是建立在父子關係的組件上，但是對於其他層級的關係，實現起來就比較繁瑣了。那麼這時候 Vuex  就能更好的幫你在各個組件間即時通訊了。 總結組件通訊並不是一定要使用必須要使用 Vuex ，對於一些簡單的資料傳遞， prop  也可以完成。本文主要是對組件傳參的一些基礎知識點的記錄。來源： 部落格園

vue.js 組件之間如何?資料傳遞？