[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> ```