Vue的一些开发技巧

父子组件的生命周期

父组件Home，子组件List

• 挂载

Home beforeCreate -> Home created -> Home beforeMount -
-> List beforeCreate -> List created -> List beforeMount -> List mounted -
-> Home mounted

• 销毁

Home beforeDestroy -> List beforeDestroy -> List destroyed -> Home destroyed

路由参数解耦

this.$route.params.xxx 的用法会使组件与$route高度耦合，从而使组件只能再某些特定URL上使用，限制了其灵活性；
正确的做法应当是配置路由参数props，达到解耦。它支持三种配置方式：

• props: true 对应组件内可以通过 props 接收 params 参数。

// 动态路由的 :xxx 其实会作为 params 参数
const router = new VueRouter({
    routes: [{
        path: '/user/:id',
        component: User,
        props: true
    }]
})
// 组件User
export default {
    props: ['id'],
}

• 对象

routes: [{
    // ...
    props: { newsletterPopup: false }
}]

• 函数：回调的第一个参数就是$route

routes: [{
    // ...
    props: (route) => ({
        id: route.query.id
    })
}]

面包屑

利用 this.$route.matched 可得到路由匹配的数组，按顺序解析可得到路由层次关系

// Breadcrumb.vue 面包屑组件
watch: {
    $route() {
        console.log(this.$route.matched)
    }
}

自定义v-model

v-model 其实只是一个语法糖，默认会向组件传递一个名为 value 的props，并注册一个名为 input 的事件。
这个 value 绑定的值就是 v-model 的值，input 事件用于修改v-model绑定的变量值，从而形成双向绑定，也避免了props的单向传递（子组件不能直接修改props中的变量值）

# --> 等效于(语法糖)：

当然，可以通过配置 model 属性，修改默认的value 、input，通过 this.$emit('xxx', v) 手动触发事件。

在自定义组件上使用 v-model

• 父组件

  
  // 可以显示注册 change 事件，做一些额外处理
  // 但 change 事件会优先修改 v-model 绑定的变量，不需要手动修改chkStatus
  

• 子组件Checkbox .vue