# 常用函数
提供常用的VUE JS的模板函数
# $Set
# 对象使用方法
<script>
export default {
setValue() {
// 如果没有使用 this.$set，视图不会更新
this.$set(this.form, '字段名', undefined);
}
}
</script>
# 数组使用方法
<script>
export default {
setValue() {
// 使用索引直接修改数组元素，视图可能不会更新
// this.arr[1] = 'orange'; // 这可能不会触发视图更新
// 使用 this.$set
this.$set(this.arr, 1, 'orange'); // 这会触发视图更新
}
}
</script>
# Computed
<script>
export default {
calcPrice() {
const {pchmNum, pchmUnitPrice} = this.form
if (pchmNum && pchmUnitPrice) {
let price = pchmNum * pchmUnitPrice;
this.form.pchmLumpSum = price
return price;
} else {
return 0
}
}
}
</script>
# Watch
# 基础用法
<script>
export default {
watch: {
id: {
handler(newValue, oldValue) {
console.log('value==>', newValue)
},
deep: true,
immediate: true
},
}
}
</script>
# 路由用法
搭配 路由跳转-JS 使用
<script>
export default {
watch: {
$route: {
handler(value) {
console.log('value==>', value)
if (value.path === ENUM.ROUTE.NOTICE_DESCRIPTION) {
let id = value.query.row
console.log('id==>', id)
if (!id) {
this.$modal.msgError('获取项目ID失败，请关闭当前页面重新进入！')
} else {
this.currentId = id
}
}
},
deep: true,
immediate: true
}
},
}
</script>
# Loading
<script>
const loading = this.$loading({
lock: true,
text: '正在提交数据......',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.3)'
})
loading.close()
</script>
# 透传
提示
包含 属性透传、 具名插槽透传 、事件监听器透传
<template>
<el-dialog v-bind="$attrs" v-on="$listeners">
<slot></slot>
<template v-for="(_, name) in $slots" v-slot:[name]="data">
<slot :name="name" v-bind="data"/>
</template>
</el-dialog>
</template>