# 修饰符 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" ```