vue单选框样式_10个Vue开发技巧助力成为更好的工程师

路由参数解耦一般在组件内使用路由参数大多数人会这样做exportdefault{methods:{getParamsId(){returnthis.

路由参数解耦

一般在组件内使用路由参数大多数人会这样做

export default {methods: {getParamsId() {return this.$route.params.id}}}

在组件中使用 $route 会使之与其对应路由形成高度耦合从而使组件只能在某些特定的 URL 上使用限制了其灵活性。

正确的做法是通过 props 解耦

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

将路由的props属性设置为true后组件内可通过props接收到params参数

export default {props: [id],methods: {getParamsId() {return this.id}}}

另外你还可以通过函数模式来返回props

const router new VueRouter({routes: [{path: /user/:id,component: User,props: (route) > ({id: route.query.id})}]})

文档

路由组件传参 | Vue Router​router.vuejs.org

函数式组件

函数式组件是无状态它无法实例化没有任何的生命周期和方法。创建函数式组件也很简单只需要在模板添加 functional 声明即可。一般适合只依赖于外部数据的变化而变化的组件因其轻量渲染性能也会有所提高。 组件需要的一切都是通过 context 参数传递。它是一个上下文对象具体属性查看文档。这里 props 是一个包含所有绑定属性的对象。函数式组件

{{item.title}}

{{item.content}}

父组件使用

(currentItem item)" />

import List from /components/List.vueexport default {components: {List},data() {return {list: [{title: title,content: content}],currentItem: }}}

文档

渲染函数 但由于 scoped 属性的样式隔离可能需要去除 scoped 或是另起一个 style 。这些做法都会带来副作用组件样式污染、不够优雅样式穿透在css预处理器中使用才生效。 我们可以使用 >>> 或 /deep/ 解决这一问题:

watch高阶使用

立即执行

watch 是在监听属性改变时才会触发有些时候我们希望在组件创建后 watch 能够立即执行

可能想到的的方法就是在 create 生命周期中调用一次但这样的写法不优雅或许我们可以使用这样的方法

export default {data() {return {name: Joe}},watch: {name: {handler: sayName,immediate: true}},methods: {sayName() {console.log(this.name)}}}

深度监听

在监听对象时对象内部的属性被改变时无法触发watch我们可以为其设置深度监听

export default {data: {studen: {name: Joe,skill: {run: {speed: fast}}}},watch: {studen: {handler: sayName,deep: true}},methods: {sayName() {console.log(this.studen)}}}

触发监听执行多个方法

使用数组可以设置多项形式包括字符串、函数、对象

export default {data: {name: Joe},watch: {name: [sayName1,function(newVal, oldVal) {this.sayName2()},{handler: sayName3,immaediate: true}]},methods: {sayName1() {console.log(sayName1>, this.name)},sayName2() {console.log(sayName2>, this.name)},sayName3() {console.log(sayName3>, this.name)}}}

文档

API — Vue.js​cn.vuejs.org

watch监听多个变量

watch本身无法监听多个变量。但我们可以将需要监听的多个变量通过计算属性返回对象再监听这个对象来实现“监听多个变量”

export default {data() {return {msg1: apple,msg2: banana}},compouted: {msgObj() {const { msg1, msg2 } thisreturn {msg1,msg2}}},watch: {msgObj: {handler(newVal, oldVal) {if (newVal.msg1 ! oldVal.msg1) {console.log(msg1 is change)}if (newVal.msg2 ! oldVal.msg2) {console.log(msg2 is change)}},deep: true}}}

事件参数$event

$event 是事件对象的特殊变量在一些场景能给我们实现复杂功能提供更多可用的参数

原生事件

在原生事件中表现和默认的事件对象相同

export default {methods: {inputHandler(msg, e) {console.log(e.target.value)}}}

自定义事件

在自定义事件中表现为捕获从子组件抛出的值

my-item.vue :

export default {methods: {customEvent() {this.$emit(custom-event, some value)}}}

App.vue

文档

事件处理 — Vue.js​cn.vuejs.orgcn.vuejs.org/v2/guide/co…​cn.vuejs.org

自定义组件双向绑定

组件 model 选项:

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

input默认作为双向绑定的更新事件通过$emit可以更新绑定的值

export default {props: {value: {type: Boolean,default: false}},methods: {switchChange(val) {this.$emit(input, val)}}}

修改组件的model选项自定义绑定的变量和事件

export default {model: {prop: num,event: update},props: {value: {type: String,default: },num: {type: Number,default: 0}},methods: {numChange() {this.$emit(update, this.num)}}}

文档

API — Vue.js​cn.vuejs.org

监听组件生命周期

通常我们监听组件生命周期会使用 $emit 父组件接收事件来进行通知

子组件

export default {mounted() {this.$emit(listenMounted)}}

父组件

其实还有一种简洁的方法使用hook即可监听组件生命周期组件内无需做任何改变。同样的created、updated等也可以使用此方法。

程序化的事件侦听器

比如在页面挂载时定义计时器需要在页面销毁时清除定时器。这看起来没什么问题。但仔细一看 this.timer 唯一的作用只是为了能够在 beforeDestroy 内取到计时器序号除此之外没有任何用处。

export default {mounted() {this.timer setInterval(() > {console.log(Date.now())}, 1000)},beforeDestroy() {clearInterval(this.timer)}}

如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题但是它可以被视为杂物。

我们可以通过 $on 或 $once 监听页面生命周期销毁来解决这个问题

export default {mounted() {this.creatInterval(hello)this.creatInterval(world)},creatInterval(msg) {let timer setInterval(() > {console.log(msg)}, 1000)this.$once(hook:beforeDestroy, function() {clearInterval(timer)})}}

使用这个方法后即使我们同时创建多个计时器也不影响效果。因为它们会在页面销毁后程序化的自主清除。 文档

处理边界情况 — Vue.js​cn.vuejs.org

手动挂载组件

在一些需求中手动挂载组件能够让我们实现起来更加优雅。比如一个弹窗组件最理想的用法是通过命令式调用就像 elementUI 的 this.$message 。而不是在模板中通过状态切换这种实现真的很糟糕。

先来个最简单的例子

import Vue from vueimport 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)

下面实现一个简易的 message 弹窗组件

Message/index.vue

{{item.content}}

// 默认选项const DefaultOptions {duration: 1500,type: info,content: 这是一条提示信息,}let mid 0export default {data() {return {notices: []}},methods: {add(notice {}) {// name标识 用于移除弹窗let _name this.getName()// 合并选项notice Object.assign({_name}, DefaultOptions, notice)this.notices.push(notice)setTimeout(() > {this.removeNotice(_name)}, notice.duration)},getName() {return msg_ (mid)},removeNotice(_name) {let index this.notices.findIndex(item > item._name _name)this.notices.splice(index, 1)}}}.wrap {position: fixed;top: 50px;left: 50%;display: flex;flex-direction: column;align-items: center;transform: translateX(-50%);}.message {--borderWidth: 3px;min-width: 240px;max-width: 500px;margin-bottom: 10px;border-radius: 3px;box-shadow: 0 0 8px #ddd;overflow: hidden;}.content {padding: 8px;line-height: 1.3;}.message.info {border-left: var(--borderWidth) solid #909399;background: #F4F4F5;}.message.success {border-left: var(--borderWidth) solid #67C23A;background: #F0F9EB;}.message.error {border-left: var(--borderWidth) solid #F56C6C;background: #FEF0F0;}.message.warning {border-left: var(--borderWidth) solid #E6A23C;background: #FDF6EC;}

Message/index.js

import Vue from vueimport Index from ./index.vuelet messageInstance nulllet MessageConstructor Vue.extend(Index)let init () > {messageInstance new MessageConstructor()messageInstance.$mount()document.body.appendChild(messageInstance.$el)}let caller (options) > {if (!messageInstance) {init(options)}messageInstance.add(options)}export default {// 返回 install 函数 用于 Vue.use 注册install(vue) {vue.prototype.$message caller}}

main.js

import Message from /components/Message/index.jsVue.use(Message)

使用

this.$messaga({type: success,content: 成功信息提示,duration: 3000})

文档

API — Vue.js​cn.vuejs.org作者WahFung链接https://juejin.im/post/5e8a9b1ae51d45470720bdfa

---

益智问答如果你知道请在评论区写出你的答案

【文章原创作者盐城网站设计公司 http://www.1234xp.com/yancheng.html 提供，感恩】