鍍金池/ 問答/HTML/ vue.js中通過對象向部件傳遞一系列屬性的復用性問題

vue.js中通過對象向部件傳遞一系列屬性的復用性問題

初學vue.js,在看官方文檔,https://vuejs.org/v2/guide/co...,在談及通過props屬性向部件傳遞參數時,文檔說可以通過直接傳遞一個對象而實現一些列屬性的傳遞,比如v-bind="object",然而這樣一來,在部件的props屬性中的各項就要和所傳遞對象的屬性名保持一直,那么部件不就沒有了可復用性了嗎?

官網相關文檔

下面是我寫的一個小demo,其中的部件cp-component6的props就需要有實例中的data.person對象的屬性名nameyear,這樣如何能做到復用呢?是我使用的場景不對還是有其他解決方法?

    <div id="example6">
        <cp-example6 v-bind="person" v-bind:do-Something="thing"></cp-example6>
    </div>

Vue.component('cp-example6',{
    template: '<p>The {{year}} old boy {{name}} {{doSomething}}.</p>',
    props: ['name','year','doSomething']
});
var example6 = new Vue({    
    el: '#example6',
    data: {
        person: {
            name: 'jack',
            year: '13'
        },
        thing: 'plays with dog'
    }
});
回答
編輯回答
兔囡囡

你對組件的復用理解有偏差。

子組件需要的 props ['name','year','doSomething'] 是不變的,根據傳入值不同,有不同的效果,那么這個子組件就是復用了的。這個可以類比下函數的復用,幾個相近的功能,我可以封裝一個函數,來提高代碼復用性,提供幾個參數來控制函數最后要實現的功能

你上面闡述的問題,其實是在說,我有一個子組件,我知道它有哪些屬性了,那么在父級我要怎么把屬性傳遞給子級,是通過 v-bind:propName="propValue" 一個個列出來呢,還是一次性通過 v-bind="obj" 傳過去,這個并不影響子組件的復用性。

2017年7月4日 08:23