在vue-cli中使用vue-property-decorator装饰器
安装npm i -s vue-property-decorator如果你的项目是安装了TS那么就可以直接使用,如果没有安装TS但是还是想用vue-property-decorator装饰器那么就还需要去配置一下了使用vue-property-decorator要用babel转义,因为我们的项目中是没安装TS的是直接使用在babel.config.js文件中module.ex...
安装
npm i -s vue-property-decorator
如果你的项目是安装了TS那么就可以直接使用,如果没有安装TS但是还是想用vue-property-decorator装饰器那么就还需要去配置一下了
使用vue-property-decorator要用babel转义,因为我们的项目中是没安装TS的是直接使用
在babel.config.js文件中
module.exports = {
presets: [
'@vue/app'
],
plugins: [
// vue-property-decorator 配置
['@babel/plugin-proposal-decorators', { legacy: true }],
['@babel/plugin-proposal-class-properties', { loose: true }],
// end vue-property-decorator 配置
]
}
在jsconfig.json文件中
{
"compilerOptions": {
"experimentalDecorators": true
}
}
那么就可以使用了那么下面我们对分别装饰器一一案例解答
@Component
@Component
装饰器可以接收一个对象作为参数,可以在对象中声明 components
,filters
,directives
等未提供装饰器的选项
虽然也可以在@Component
装饰器中声明computed
,watch
等,但并不推荐这么做,因为在访问this
时,编译器会给出错误提示
import TSTest from './zj'
import { Component, Vue } from 'vue-property-decorator'
@Component({
components: {
TSTest // 组件名称
}
})
class element_1 extends Vue {
aa = true
// 显示按钮
handleShow () {
console.log('我被点击了')
this.aa = true
}
}
export default element_1
注意:@Component({})这个是是放在class外面的为什么呢?我认为是因为在Component对象中的值是一些定义,和渲染的作用的方法,可以不用去继承Vue中的一些方法,例如:filters(过滤),都是自己定义就好了,对吧,所以就写出来了
@Prop
当父组件有传:show的时候那么子组件就可以这样使用了
参数一:类型,默认值
注意是在TS中的写法好像show后面还有加!什么的但是不用TS的话就不需要,比如我就没用只是单单用这个装饰器
@Prop({ type: Boolean, default: true }) show
@PropSync
不知道大家对.sync修饰符的理解是这么样了,可以看我以前写的-sync
这里的show就是接收的值,当showTransmit值发生改变的时候,这个值就会传递给父组件中:show中的那个值
@PropSync('show', { type: Boolean, default: true }) showTransmit
当然你要认为@PropSync难理解只用@Prop也可以就是要外加
参数二 :改变的值这里为false,传给父组件
this.$emit('update:show', false);
@Watch
监听,这个简单好理解
参数一:监听的值
参数二:对象
@Watch('showTransmit', { immediate: true, deep: true }) //这里不用this
// immediate?:boolean 侦听开始之后是否立即调用该回调函数
// deep 被侦听的对象的属性被改变时,是否调用该回调函数,也就是深度查询
showTransmitWatch (newVal, oldVal) {
console.log('改变后的值', newVal)
console.log('改变前的值', oldVal)
}
@Model
v-molder的装饰器,这个比较复杂,可以先看我以前写的vue的介绍 -- Model
HTML:这个是子组件中的input
<input type="text" :value="value1" @change="handleVal2($event)" />
JS
解析:
modelEvent是告诉父组件需要监听的事件,value1是父组件传过来的值
相当于
model:{
prop: 'value1', // value1是子组件接收的值,传递给父组件的值是$emit('input','参数')中的参数的值,注意的是子组件不要直接拿父组件传过来的值去修改
event: 'modelEvent' // js中那个父需要的监听事件的名称(用了v-molder语法糖会默认存在),$emit的事件参数(e.target.value)会自动成为父组件中传进来的值(由语法糖完成赋值)
}
@Model('modelEvent', { type: String, default: '我是默认值' }) value1
// 事件
handleVal2 (e) {
this.$emit('modelEvent', e.target.value)
}
解析和注意事项:
解析:当input中的@change事件触发的时候(input中的内容发生改变),handleVal2()事件执行,给父组件监听事件modelEvent,和参数e.target.value,由于@Model中的设置那么这个参数会传给父组件中v-model中的值,同时父组件会跟新value1的值传给子组件
注意:value1的值只是父组件传给子组件的值,当父组件传的值不改变他是不会变的;外面不要直接去改变value1的值,因为有可能value1的值是对象的时候有引用类型的问题
@Mixins
class OperationStockControlInventoryEarlyWarning extends Mixins(ListMixin) {}
这样就继承了ListMixin文件中的东西,我再ListMixin文件有继承Vue那么OperationStockControlInventoryEarlyWarning文件也就继承了Vue,同时还有ListMixin文件中写的东西
class ListMixin extends Vue
@Inject/ @Provide
provide 和 inject 绑定并不是可响应的。这是刻意为之的。
父组件定义
用Vue.observable({})定义可以在变得响应
/**
* 提供祖先组件的实例
*/
@Provide() provideParam = Vue.observable({
isClickInquireBtn: false // 是否点击查询按钮
});
子组件监听
@Inject({ type: Object, default: () => {} }) provideParam // 父组件对象
@Watch('provideParam', { deep: true })
provideParamWatcher (val) {
if (val.isClickInquireBtn) {
//进行一些操作
}
}
更多推荐
所有评论(0)