Vue开发中的一点技♂巧

路由参数解耦

// 设置为 trueconst 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()在内存中生成dommessageInstance.$mount()// messageInstance.$el获取的是dom元素document.body.appendChild(messageInstance.$el)

如果觉得《Vue开发中的一点技♂巧》对你有帮助，请点赞、收藏，并留下你的观点哦！