99热99这里只有精品6国产,亚洲中文字幕在线天天更新,在线观看亚洲精品国产福利片 ,久久久久综合网

歡迎加入QQ討論群258996829
麥子學(xué)院 頭像
蘋果6袋
6
麥子學(xué)院

vue.js 學(xué)習(xí)之組件之間數(shù)據(jù)傳遞詳解

發(fā)布時間：2017-07-23 21:21  回復(fù):0  查看:2783   最后回復(fù)：2017-07-23 21:21  
組件是 vue.js  最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用。如何傳遞數(shù)據(jù)也成了組件的重要知識點之一。本文和大家分享的就是vue.js  組件之間傳遞數(shù)據(jù)相關(guān)內(nèi)容，一起來看看吧，希望對大家 學(xué)習(xí)vue.js有所幫助。
　　 組件
　　組件與組件之間，還存在著不同的關(guān)系。父子關(guān)系與兄弟關(guān)系（不是父子的都暫稱為兄弟吧）。
　　 父子組件
　　父子關(guān)系即是組件 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
　　子組件想要使用父組件的數(shù)據(jù)，我們需要通過子組件的 props  選項來獲得父組件傳過來的數(shù)據(jù)。以下我使用在  .vue  文件中的格式來寫例子。
　　 如何傳遞數(shù)據(jù)
　　在父組件 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  選項中聲明它期待獲得的數(shù)據(jù)
　　<template>
    <span>Hello {{message}}</span>
</template>
<script>
    export default {
        //  在  props  中聲明獲取父組件的數(shù)據(jù)通過  message  傳過來
        props: ['message']
    }
</script>
　　那么頁面中就會渲染出：Hello linxin
　　 單向數(shù)據(jù)流
　　當(dāng)父組件的 name  發(fā)生改變，子組件也會自動地更新視圖。但是在子組件中，我們不要去修改  prop 。如果你必須要修改到這些數(shù)據(jù)，你可以使用以下方法：
　　方法一：把 prop  賦值給一個局部變量，然后需要修改的話就修改這個局部變量，而不影響  prop
　　export  default {
　　 data(){
　　newMessage: null
　　},
　　props: ['message'],
　　created(){
　　 this.newMessage =  this.message;
　　}
　　}
　　方法二：在計算屬性中對 prop  進行處理
　　 export  default {
　　 props: ['message'],
　　computed{
　　newMessage(){
　　return this.newMessage + '  哈哈哈 ';
　　}
　　}
　　}
　　 自定義事件
　　prop  是單向綁定的：當(dāng)父組件的屬性變化時，將傳導(dǎo)給子組件，但是不會反過來。修改子組件的  prop  值，是不會傳回給父組件去更新視圖的。那么子組件要如何去與父組件通訊呢？
　　那就是自定義事件。通過在父組件 $on(eventName)  監(jiān)聽自定義事件，當(dāng)子組件里  $emit(eventName)  觸發(fā)該自定義事件的時候，父組件執(zhí)行相應(yīng)的操作。
　　比如在父組件中控制一個彈框子組件的顯示，在子組件中按下關(guān)閉之后，告訴父組件去隱藏它，然后父組件就執(zhí)行操作隱藏彈框。
　　<template>
    <div class="app">
        // hide  為自定義事件，名字可以自己隨便起，不能有大寫字母，可以使用短橫線
        // @hide  監(jiān)聽子組件觸發(fā)  hide  事件，則會執(zhí)行  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"> 關(guān)閉彈框 </button>
    </div>
</template>
<script>
    export default {
        //  駝峰式命名的  prop  需要轉(zhuǎn)換為相對應(yīng)的短橫線隔開式  is-show
        props: ['isShow'],
        methods: {
            toHide(){
                // $emit  方法觸發(fā)父組件的監(jiān)聽事件
                this.$emit('hide');
            }
        }
    }
</script>
　　這樣就實現(xiàn)了父子組件之間的相互通訊。
　　 Vuex
上面的例子都是建立在父子關(guān)系的組件上，但是對于其他層級的關(guān)系，實現(xiàn)起來就比較繁瑣了。那么這時候 Vuex  就能更好的幫你在各個組件間實時通訊了。
　　 總結(jié)
　　組件通訊并不是一定要使用必須要使用 Vuex ，對于一些簡單的數(shù)據(jù)傳遞， prop  也可以完成。本文主要是對組件傳參的一些基礎(chǔ)知識點的記錄。
來源： 博客園

您還未登錄，請先登錄

熱門帖子

最新帖子

?