在Vue中,組件分為父組件和子組件。子組件是被父組件引用的組件,可以通過props屬性接收父組件傳遞的參數(shù),實現(xiàn)與父組件的數(shù)據(jù)交互。
在Vue中,創(chuàng)建子組件需要使用Vue.extend()方法來進(jìn)行組件的定義。定義完成后,可以在父組件中使用子組件標(biāo)簽進(jìn)行引用,同時將需要傳遞給子組件的數(shù)據(jù)通過props屬性進(jìn)行傳遞。
Vue.component('child', { props: ['name'], template: '{{ name }}' }); Vue.component('parent', { template: '' }); new Vue({ el: '#app' });
在上面的代碼中,我們定義了一個名為child的組件,并且定義了一個name的props屬性用于接收父組件傳遞的參數(shù)。然后我們創(chuàng)建了一個名為parent的父組件,在父組件中引用了child組件,并向子組件傳遞了一個name值為vue的參數(shù)。
當(dāng)父組件渲染完成后,頁面中將會顯示一個名為vue的文字,這是子組件在接收到父組件傳遞的參數(shù)后所顯示的內(nèi)容。