# 修飾符 sync >[info]* Vue規則：組件不能修改props外部數據 >* Vue規則：$emit可以觸發事件并傳參 >* Vue規則：$event可以獲取$emit的參數 ***** >Vue 中組件傳值通常是用Props進行傳值，Props值只能在父組件中更新并傳遞給子組件，在子組件內部，是不允許改變傳遞進來的props值，這樣做是為了保證數據單向流通。但有時候，我們會遇到一些場景，需要在子組件內部改變props屬性值并更新到父組件中，這時就需要用到`.sync`修飾符 ***** >[warning]實例：（沒有使用.sync） **父組件：** ``` <template> <div> 父組件：{{total}} <button @click ='click'>點擊</button> <div>----------------------------------我是華麗的分割線-------------------------</div> <!-- 通過props向子組件傳值total 監聽子組件傳回來的total值 --> <my-child :money="total" v-on:update:money="total = $event" /> </div> </template> <script> import MyChild from '../components/child.vue' export default { components: { MyChild }, data () { return { total: 1000 } }, methods: { click () { this.total += 100; } } } </script> ``` **子組件：** ``` <template> <div> <div>子組件: {{money}} (我是父組件傳過來的)</div> <!-- 觸發事件，向父組件傳值 --> <button @click = "$emit('update:money', money - 100);">點擊</button> </div> </template> <script> export default { props: ['money'], } </script> ``` **實現效果** 父組件和子組件的total雙向改變  ***** >[warning]實例：（使用.sync） **父組件** ``` <template> <div> 父組件：{{total}} <button @click ='click'>點擊</button> <div>----------------------------------我是華麗的分割線-------------------------</div> <!-- 使用sync修飾符對子組件傳值進行修飾，可以在父組件中不寫監聽子組件傳遞過來的emit（即sync簡化聲明監聽事件的寫法） --> <my-child :money.sync="total" /> </div> </template> <script> import MyChild from '../components/child.vue' export default { components: { MyChild }, data () { return { total: 1000 } }, methods: { click () { this.total += 100; } } } </script> ``` **子組件** ``` <template> <div> <div>子組件: {{money}} (我是父組件傳過來的)</div> <!-- 觸發事件，向父組件傳值 --> <button @click = "$emit('update:money', money - 100);">點擊</button> </div> </template> <script> export default { props: ['money'], } </script> ``` ***** >[info]總結 ``` :money.sync ="total" 等價于 :money = "total" v-on:update:money="total =$event" ```