在Vue中,組件是基本的單位。組件可以包含其他組件,這就是組件嵌套的情況。當我們需要在父組件中向子組件傳遞數據時,就需要使用Vue中的子父傳遞。
Vue中的組件通信主要有以下幾種方式:props、$emit、$parent和$children。
Props
Vue.component('child', { props: ['message'], template: '{{ message }}' }) <parent> <child message="Hello!"></child> </parent>
在子組件中,我們定義了一個props選項,用來接收父組件傳遞過來的數據。在父組件中,我們通過綁定屬性的方式將數據傳遞給子組件。
$emit
Vue.component('child', { template: 'Send Message', methods: { sendMessage: function () { this.$emit('my-message', 'Hello!') } } }) <parent> <child @my-message="showMessage"></child> </parent>
在子組件中,我們通過$emit方法發送一個事件,并傳遞參數。在父組件中,我們通過監聽這個事件,來接收子組件傳遞過來的數據。
$parent
Vue.component('child', { template: '{{ $parent.message }}' }) <parent> <child></child> </parent>
在子組件中,我們可以通過$parent屬性來獲取父組件的實例。這樣我們就可以訪問父組件中的數據了。
$children
Vue.component('parent', { mounted: function () { console.log(this.$children) }, template: '<div><child></child></div>' }) <parent></parent>
在父組件中,我們可以通過$children屬性來獲取子組件的實例。這個屬性返回的是一個數組,包含了所有的子組件。
綜上所述,Vue中的子父傳遞是非常方便的。通過props、$emit、$parent和$children四種方式,我們可以輕松地在組件之間傳遞數據和事件。
上一篇vue委托多線程