[TOC] ## `vue-router`路由傳參 [文檔](https://router.vuejs.org/zh/guide/essentials/passing-props.html) ### 布爾模式 > 如果`props`被設置為`true`，`route.params`將會被設置為組件屬性。 ### 對象模式 ``` const router = new VueRouter({ routes:[ { path: '/bar/:name', name:'bar', component: Bar, props:{ a:1,b:2}} ] }) ``` ### 函數模式 ``` const router = new VueRouter({ routes:[ { path: '/bar/:name', name:'bar', component: Bar, props: (route) => ({ query: route.query.q, name:route.params.name }) } ] }) ``` ## 子組件中修改props傳進來的數據 > 需求：模態框組件中，點擊遮罩，關閉模態框 ### `v-model` [文檔](https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model) **父組件** ``` <template> <div> <button @click="is_show_modal = true">模態框</button> <modal v-model="is_show_modal"></modal> </div> </template> <script> import modal from '../components/modal.vue' export default { data() { return { is_show_modal:false } }, components:{ modal }, methods:{} }; </script> ``` **子組件`modal.vue`** ``` <template> <div v-if="is_show_modal"> <div class="shade" @click="$emit('hide_modal', false)"></div> <div class="modal">模態框</div> </div> </template> <script> export default { props:['is_show_modal'], data(){ return {} }, model: { prop: 'is_show_modal', event: 'hide_modal' }, methods:{} } </script> ``` ### `.sync` [文檔](https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6) 父組件 ``` <template> <div> <button @click="is_show_modal = true">模態框</button> <modal v-bind:is_show_modal.sync="is_show_modal"></modal> </div> </template> <script> import modal from '../components/modal.vue' export default { data() { return { is_show_modal:false } }, components:{ modal }, methods:{} }; </script> ``` **子組件`modal.vue`** ``` <template> <div v-if="is_show_modal"> <div class="shade" @click="$emit('update:is_show_modal', false)"></div> <div class="modal">模態框</div> </div> </template> <script> export default { props:['is_show_modal'], data(){ return {} }, methods:{} } </script> ```