vue-property-decorator用法详解


Posted in Javascript onDecember 12, 2019

vue-property-decorator

这个组件完全依赖于vue-class-component.它具备以下几个属性:

  • @Component (完全继承于vue-class-component)
  • @Emit
  • @Inject
  • @Provice
  • @Prop
  • @Watch
  • @Model
  • Mixins (在vue-class-component中定义);

使用

当我们在vue单文件中使用TypeScript时,引入vue-property-decorator之后,script中的标签就变为这样:

<script lang="ts">
  import {Vue, Component} from 'vue-property-decorator';

  @Component({})
  export default class "组件名" extends Vue{
    ValA: string = "hello world";
    ValB: number = 1;
  }
</script>

等同于

<script lang="es6">
  import Vue from 'vue';

  export default {
    data(){
      return {
        ValA: 'hello world',
        ValB: 1
      }
    }
  }
</script>

总结: 对于data里的变量对顶,我们可以直接按ts定义类变量的写法写就可以

那么如果是计算属性呢? 这就要用到getter了.

<script lang="ts">
  import {Vue, Component} from 'vue-property-decorator';

  @Component({})
  export default class "组件名" extends Vue{
    get ValA(){
      return 1;
    }
  }
</script>

等同于

<script lang="es6">
  import Vue from 'vue';

  export default {
    computed: {
      ValA: function() {
        return 1;
      }
    }
  }
</script>

总结: 对于Vue中的计算属性,我们只需要将该计算属性名定义为一个函数,并在函数前加上get关键字即可.

原本Vue中的computed里的每个计算属性都变成了在前缀添加get的函数.

@Emit

关于Vue中的事件的监听与触发,Vue提供了两个函数$emit和$on.那么在vue-property-decorator中如何使用呢?

这就需要用到vue-property-decorator提供的@Emit属性.

<script lang="ts">
  import {Vue, Component, Emit} from 'vue-property-decorator';

  @Component({})
  export default class "组件名" extends Vue{
    mounted(){
      this.$on('emit-todo', function(n) {
        console.log(n)
      })

      this.emitTodo('world');
    }

      @Emit()
    emitTodo(n: string){
      console.log('hello');
    }
  }
</script>

运行上面的代码会打印 'hello' 'world', 为什么呢? 让我们来看看它等同于什么

<script lang="es6">
  import Vue from 'vue';

  export default {
    mounted(){
      this.$on('emit-todo', function(n) {
        console.log(n)
      })

      this.emitTodo('world');
    },
    methods: {
      emitTodo(n){
        console.log('hello');
        this.$emit('emit-todo', n);
      }
    }
  }
</script>

可以看到,在@Emit装饰器的函数会在运行之后触发等同于其函数名(驼峰式会转为横杠式写法)的事件, 并将其函数传递给$emit.
如果我们想触发特定的事件呢,比如在emitTodo下触发reset事件:

<script lang="ts">
  import {Vue, Component, Emit} from 'vue-property-decorator';

  @Component({})
  export default class "组件名" extends Vue{

    @Emit('reset')
    emitTodo(n: string){

    }
  }
</script>

我们只需要给装饰器@Emit传递一个事件名参数reset,这样函数emitTodo运行之后就会触发reset事件.

总结:在Vue中我们是使用$emit触发事件,使用vue-property-decorator时,可以借助@Emit装饰器来实现.@Emit修饰的函数所接受的参数会在运行之后触发事件的时候传递过去.

@Emit触发事件有两种写法

  • @Emit()不传参数,那么它触发的事件名就是它所修饰的函数名.
  • @Emit(name: string),里面传递一个字符串,该字符串为要触发的事件名.

@Watch

我们可以利用vue-property-decorator提供的@Watch装饰器来替换Vue中的watch属性,以此来监听值的变化.

在Vue中监听器的使用如下:

export default{
  watch: {
    'child': this.onChangeValue
      // 这种写法默认 `immediate`和`deep`为`false`
    ,
    'person': {
      handler: 'onChangeValue',
      immediate: true,
      deep: true
    }
  },
  methods: {
    onChangeValue(newVal, oldVal){
      // todo...
    }
  }
}

那么我们如何使用@Watch装饰器来改造它呢?

import {Vue, Component, Watch} from 'vue-property-decorator';

@Watch('child')
onChangeValue(newVal: string, oldVal: string){
  // todo...
}

@Watch('person', {immediate: true, deep: true})
onChangeValue(newVal: Person, oldVal: Person){
  // todo...
}

总结:  @Watch使用非常简单,接受第一个参数为要监听的属性名 第二个属性为可选对象.@Watch所装饰的函数即监听到属性变化之后的操作.

@Prop

我们在使用Vue时有时会遇到子组件接收父组件传递来的参数.我们需要定义Prop属性.

比如子组件从父组件接收三个属性propA,propB,propC.

  • propA类型为Number
  • propB默认值为default value
  • propC类型为String或者Boolean
export default {
 props: {
  propA: {
   type: Number
  },
  propB: {
   default: 'default value'
  },
  propC: {
   type: [String, Boolean]
  },
 }
}

我们使用vue-property-decorator提供的@Prop可以将上面的代码改造为如下:

<script lang="ts">
  import {Vue, Component, Prop} from 'vue-property-decorator';

  @Component({})
  export default class "组件名" extends Vue{
    @Prop(Number) propA!: number;
    @Prop({default: 'default value'}) propB!: string;
    @propC([String, Boolean]) propC: string | boolean;
  }
</script>

这里 !和可选参数?是相反的, !告诉TypeScript我这里一定有值.

总结: @Prop接受一个参数可以是类型变量或者对象或者数组.@Prop接受的类型比如Number是JavaScript的类型,之后定义的属性类型则是TypeScript的类型.

Mixins

在使用Vue进行开发时我们经常要用到混合,结合TypeScript之后我们有两种mixins的方法.

一种是vue-class-component提供的.

//定义要混合的类 mixins.ts
import Vue from 'vue';
import Component from 'vue-class-component';

@Component // 一定要用Component修饰
export default class myMixins extends Vue {
  value: string = "Hello"
}
// 引入
import Component {mixins} from 'vue-class-component';
import myMixins from 'mixins.ts';

@Component
export class myComponent extends mixins(myMixins) {
             // 直接extends myMinxins 也可以正常运行
   created(){
     console.log(this.value) // => Hello
  }
}

第二种方式是在@Component中混入.

我们改造一下mixins.ts,定义vue/type/vue模块,实现Vue接口

// mixins.ts
import { Vue, Component } from 'vue-property-decorator';


declare module 'vue/types/vue' {
  interface Vue {
    value: string;
  }
}

@Component
export default class myMixins extends Vue {
  value: string = 'Hello'
}

混入

import { Vue, Component, Prop } from 'vue-property-decorator';
import myMixins from '@static/js/mixins';

@Component({
  mixins: [myMixins]
})
export default class myComponent extends Vue{
  created(){
    console.log(this.value) // => Hello
  }
}

总结: 两种方式不同的是在定义mixins时如果没有定义vue/type/vue模块, 那么在混入的时候就要继承该mixins; 如果定义vue/type/vue模块,在混入时可以在@Component中mixins直接混入.

@Model

Vue组件提供model: {prop?: string, event?: string}让我们可以定制prop和event.
默认情况下,一个组件上的v-model 会把 value用作 prop且把 input用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop来达到不同的目的。使用model选项可以回避这些情况产生的冲突。

下面是Vue官网的例子

Vue.component('my-checkbox', {
 model: {
  prop: 'checked',
  event: 'change'
 },
 props: {
  // this allows using the `value` prop for a different purpose
  value: String,
  // use `checked` as the prop which take the place of `value`
  checked: {
   type: Number,
   default: 0
  }
 },
 // ...
})
<my-checkbox v-model="foo" value="some value"></my-checkbox>

上述代码相当于:

<my-checkbox
 :checked="foo"
 @change="val => { foo = val }"
 value="some value">
</my-checkbox>

即foo双向绑定的是组件的checke, 触发双向绑定数值的事件是change

使用vue-property-decorator提供的@Model改造上面的例子.

import { Vue, Component, Model} from 'vue-property-decorator';

@Component
export class myCheck extends Vue{
  @Model ('change', {type: Boolean}) checked!: boolean;
}

总结, @Model()接收两个参数, 第一个是event值, 第二个是prop的类型说明, 与@Prop类似, 这里的类型要用JS的. 后面在接着是prop和在TS下的类型说明.

暂时常用的就这几个,还有@Provice和@Inject等用到了再写.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用脚本调用样式的几种方法
Dec 09 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
基于小程序请求接口wx.request封装的类axios请求
Jul 02 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 #Javascript
JavaScript Reflect Metadata实现详解
Dec 12 #Javascript
JS动态显示倒计时效果
Dec 12 #Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 #Javascript
js实现倒计时秒杀效果
Mar 25 #Javascript
vue el-table实现自定义表头
Dec 11 #Javascript
Vue如何获取数据列表展示
Dec 11 #Javascript
You might like
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
PHP数组实例详解
2016/06/26 PHP
自己的js工具_Form 封装
2009/08/21 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
原生和jQuery的ajax用法详解
2017/01/23 Javascript
nodejs搭建本地服务器并访问文件的方法
2017/03/03 NodeJs
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
python实现批量监控网站
2016/09/09 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
Python telnet登陆功能实现代码
2020/04/16 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
护理职业生涯规划书
2014/01/24 职场文书
应聘教师自荐书
2014/06/16 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
2014财务年度工作总结
2014/11/11 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server
Python进行区间取值案例讲解
2021/08/02 Python
我国拿下天问一号火星着陆区附近 22 个地理实体命名:平乐、西柏坡、古田、漠河等
2022/04/29 数码科技