Vue.js元件通訊
本篇介紹在Vue.js應用程式中如何讓元件彼此通訊。 Props 從子元件到父元件透過事件通訊 使用事件巴士在任意元件之間通訊 其他替代方案 Vue元件可以使用不同的方式進行通訊。 Props 第一種方式是使用props。 父元件可以透過在元件宣告時加入參數，將資料傳遞給子元件： <template> <div> <Car color="green" /> </div> </template> <script> import Car from './components/Car' export default { name: 'App', components: { Car } } </script> Props是單向的，只能由父元件傳送資料給子元件。當父元件改變prop的值時，新的值會被傳送給子元件並重新渲染。 反過來是不行的，子元件不應該去修改prop的值。 使用事件在子元件到父元件之間通訊 事件允許你從子元件向父元件進行通訊： <script> export default { name: 'Car', methods: { handleClick: function() { this.$emit('clickedSomething') } } } </script> 在父元件的template中，可以使用v-on指令來攔截這個事件： <template> <div> <Car v-on:clickedSomething="handleClickInParent" /> <!-- 或者 --> <Car @clickedSomething="handleClickInParent" /> </div> </template> <script> export default { name: 'App', methods: { handleClickInParent: function() { //....