在使用Vue框架開發應用過程中, 經常遇到需要將數據在各個組件間傳遞的情況。Vue提供了多種傳值方式以滿足業務需求。下面將介紹一些常用的Vue傳值方式。
最基本的方式是通過props屬性將父組件的數據傳遞給子組件。在父組件中使用子組件時,可以在子組件上綁定props屬性以及綁定的props對應的值。 示例代碼如下:
//父組件 Vue.component('child', { props: ['message'], template: '{{ message }}' }) //在父組件的模板中使用子組件
以上代碼中,父組件通過props屬性向子組件傳遞了message這個屬性以及相應的值。
除了父組件向子組件傳值,Vue還提供了子組件向父組件傳值的方法。可以通過使用this.$emit()方法觸發父組件監聽的自定義事件,同時傳遞需要的數據。 示例代碼如下:
//父組件模板中監聽子組件自定義事件并執行函數//子組件使用方法觸發自定義事件并傳值 this.$emit('my-event', '傳遞的數據');
以上代碼中,父組件監聽了名為my-event的自定義事件,創建了當該事件被觸發時執行的函數handleChildEvent。 子組件在需要傳遞數據給父組件時,使用 this.$emit()方法觸發自定義事件并傳遞數據。
除了以上兩種方式,Vue還提供了多種其他傳值方式,比如provide/inject,$attrs/$listeners等。這里就不一一詳細介紹。
上一篇vue 事件綁定源碼
下一篇vue 優勢與劣勢