Vue开发中的一点技♂巧

路由参数解耦

1. 设置路由的 props 参数
2. 在组件内用 props 接收 params 参数

// 设置为 true
const router = new VueRouter({
  routes: [{
    path: '/user/:id',
    component: User,
    props: true
  }]
})

// 用函数返回
const router = new VueRouter({
  routes: [{
    path: '/user/:id',
    component: User,
    props: (route) => ({
      id: route.query.id
    })
  }]
})

样式穿透

>>> .el-image { }

/deep/ .el-image { }

原生事件

<input type="text" @input="inputHandler('hello', $event)" />

子组建向父组件通信

this.$emit('method', 'value')

父组件监听子组件的生命周期

<template>
    <child @hook:mounted="listenMounted" />
</template>

监听器的销毁

emm…我一直把监听器的 id 放在 data 里,但只是在销毁的时候用到一次,所以还可以这么写:

const timer = setInterval(method, 1000)

this.$once('hook:beforeDestroy', function () {
  clearInterval(timer)
})

手动挂载组件

import Vue from 'vue'
import Message from './Message.vue'

// 构造子类
let MessageConstructor = Vue.extend(Message)
// 实例化组件
let messageInstance = new MessageConstructor()
// $mount可以传入选择器字符串，表示挂载到该选择器
// 如果不传入选择器，将渲染为文档之外的的元素，你可以想象成 document.createElement()在内存中生成dom
messageInstance.$mount()
// messageInstance.$el获取的是dom元素
document.body.appendChild(messageInstance.$el)