Vue开发中的一点技♂巧

路由参数解耦

设置路由的 props 参数
在组件内用 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)

Vue开发中的一点技♂巧相关推荐

Vue开发中遇到的问题及解决方案
Vue开发中遇到的问题及解决方案参考文章: (1)Vue开发中遇到的问题及解决方案 (2)https://www.cnblogs.com/lvruifang/p/8610688.html (3)ht ...
Vue开发中的一些常见套路和技巧（上）
Vue开发中的一些常见套路和技巧(上) 简介大家好呀,我是 wangly19 ,这次文章主要是来总结下我在使用 Vue.js 总结出来的一些套路,可以做一些查缺补漏.如果还有有趣的小技巧,也可以在评 ...
VUE开发中/deep/的使用其他写法v-deep:: vue3中写法 :deep(.img)
实际开发中经常会遇到一种情况,一个功能需求例如表格,可以直接使用element等组件库的表格组件,省时省力. 但实际需求总不会是和组件完全一样的,UI会有各种天马行空的样式给你,例如这种表格样式这时 ...
Vue 开发中常见报错与处理
1. "xxxx" is assigned a value but never used.eslintno-unused-vars 错误原因:eslint的验证语法解决办法:在错 ...
Vue开发中的一些常见套路和技巧
属性排放 export default {name: '名称',components: { // 组件挂载a},created(){} // 数据获取beforeMount() {}, // 数据获取 ...
Spring boot 和Vue开发中CORS跨域问题
1. 遇到的问题: 我用spring-boot 做Rest服务,Vue做前端框架,用了element-admin-ui这个框架做后台管理.在调试的过程中遇到了如下错误: Preflight respo ...
Vue开发中有着原声app效果的滚动的第三方插件better-scroll在github的上面的运用方法及地址
https://github.com/ustbhuangyi/better-scroll 以上是github地址 better-scroll 中文文档 What is better-scroll ...
vue 开发中element-ui库的switch开关绑定number类型数据不成功问题解决方法
最近在使用element-ui库进行vue项目的开发,这个ui库对于一些后台管理项目的开发还是非常实用的,各种组件都比较齐全,而且文档也很详细.但是对于我这种初学者来说,部分组件的文档还需更加详细. ...
在vue开发中会遇到methods方法里有一个函数嵌套另一个函数，最内层函数this取不到data数据，该怎么解决？
一,问题在vue的methods方法中两个函数互相嵌套,最内层函数this取不到data数据二,原因 this的指向问题三,解决方法 (1)给最外层函数this重新赋值给一个变量 methods ...

Vue开发中的一点技♂巧

路由参数解耦

样式穿透

原生事件

子组建向父组件通信

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

监听器的销毁

手动挂载组件

Vue开发中的一点技♂巧相关推荐

最新文章

热门文章