vue-property-decorator 使用

2020-03-28 本文已影响0人修朋飞

@Component(options)

这一个是与另一个 vue 的库 vue-class-component 一样的用法. 这个装饰器库源自 class 库, 只是再封装了一层, 使代码更为简洁明了. options 里面需要配置 decorator 库不支持的属性, 哪些是不支持的呢?
那就请看完全文, 凡是没写的都是不支持的. 比如components, filters, directives等

components

表示该组件引入了哪些子组件

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

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

@Component({
  components: {
    HelloWorld, // 声明子组件的引用
  }
})
export default class App extends Vue {}
</script>

filters

filter 表示对数据的筛选, 跟 linux 中的管道符十分相似, 数据通过 filter 进行处理变成新的数据.注意, 在这里配置时一定要使用 filters, 不要忘了 s, 否则不会报错但是也没作用。

<template>
  <div>{{msg | filterA}}</div>
</template>

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

@Component({
  filters: {
    addWorld: (value: string) => `${value} world`,
  },
})
export default class App extends Vue {
  private msg = 'Hello' // filter 之后显示 hello world
}
</script>

directives

具体的介绍可以看 Vue 的官方介绍简单来说就是 DOM 节点在一些特定钩子触发时添加一些额外的功能。

钩子函数有：

bind 指令绑定到元素时调用, 可以进行一次性设置
inserted 绑定元素被插入到父节点时调用
update VNode 更新时调用
componentUpdated VNode 及子 VNode 全部更新后调用
unbind 元素解绑时调用

如果bind 和 update 时调用一样可以进行简写, 不用指定某个钩子

钩子函数参数:

el 对应绑定的 DOM
binding

name 指令名 v-demo="1+1" 为 "demo"
value 绑定的值 v-demo="1+1" 为 2
oldValue 在 update componentUpdated 可用
expression 字符串形式的表达式 v-demo="1+1" 为 "1+1"
arg 指令的参数 v-demo:foo 为 'foo', 注意要在 modifier 前使用 arg, 不然会将 arg 作为 modifier 的一部分, 如v-demo.a:foo arg 为 undefined, modifier 为{'a:foo': true}
modifiers 包含修饰符的对象比如 v-demo.a 这个值为 {a:true}

vnode vue 的虚拟节点, 可参考源码查看可用属性
oldVnode 上一个虚拟节点(update 和 componentUpdated 可用)

看个简单的实例:

<template>
  <span v-demo:foo.a="1+1">test</span>
</template>

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

@Component({
  directives: {
    demo: {
      bind(el, binding, vnode) {
        console.log(`bindingName: ${binding.name}, value: ${binding.value}, args: ${binding.arg}, expression: ${binding.expression}`); // bindingName: demo, value: 2, args: foo, expression: 1+1
        console.log('modifier:', binding.modifiers); // {a:true}, 无法转为 primitive, 所以单独打印
      },
    },
    demoSimplify(el, binding, vnode) {
      // do stuff
    },
  },
})
export default class App extends Vue {}
</script>

@Prop()

父子组件传递数据 props的修饰符

参数可以传

Constructor 例如String, Number, Boolean
Constructor[], 构造函数的队列, 类型在这队列中即可
PropOptions
- type 类型不对会报错 Invalid prop: type check failed for prop "xxx". Expected Function, got String with value "xxx".
- default 如果父组件没有传的话为该值, 注意只能用这一种形式来表示默认值, 不能@Prop() name = 1来表示默认值 1, 虽然看起来一样, 但是会在 console 里报错, 不允许修改 props 中的值
- required 没有会报错 [Vue warn]: Missing required prop: "xxx"
- validator 为一个函数, 参数为传入的值, 比如(value) => value > 100

父组件:

<template>
  <div id="app">
    <PropComponent :count="count" />
  </div>
</template>

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

@Component
class Parent extends Vue {
  private count = 101;
}
</script>

子组件:

<template>
  <div>{{ count }}</div>
</template>

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

@Component
export default class PropsComponent extends Vue {
  // !表示有值, 否则 ts 会告警未初始化 }
  @Prop({
    type: Number,
    validator: value => {
      return value > 100
    },
    required: true
  })
  private count!: string
}
</script>

@PropSync() 与 Prop 的区别是子组件可以对 props 进行更改, 并同步给父组件,

子组件:

<template>
  <div>
    <p>{{count}}</p>
    <button @click="innerCount += 1">increment</button>
  </div>
</template>
<script lang="ts">
    import { Component, Vue, PropSync } from "vue-property-decorator"

    @Component
    export default class PropSyncComponent extends Vue {
      // 注意@PropSync 里的参数不能与定义的实例属性同名, 因为还是那个原理, props 是只读的
      @PropSync('count') private innerCount!: number
    }
</script>

父组件: 注意父组件里绑定 props 时需要加修饰符 .sync

<template>
  <PropSyncComponent :count.sync="count" />
</template> 

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

    @Component({ components: PropSyncComponent })

    export default class PropSyncComponent extends Vue {
      // 注意@PropSync 里的参数不能与定义的实例属性同名, 因为还是那个原理, props 是只读的.
      @PropSync('count') private innerCount!: number
    }
</script>

也可结合 input 元素的 v-model 绑定数据, 实时更新. 由读者自行实现.

@Watch监听属性发生更改时被触发.

可接受配置参数 options

immediate?: boolean 是否在侦听开始之后立即调用该函数
deep?: boolean 是否深度监听.

<template>
  <div>
    <button @click="person.name.firstName = '修'">change deeper</button>
    <button @click="person.name = '修'">change deep</button>
  </div>
</template>
<script lang="ts">
    import { Component, Vue, Watch } from 'vue-property-decorator'

    @Component
    export default class PropSyncComponent extends Vue {  
      private person = { name: { firstName: '修' } }  
      @Watch('person', { deep: true })
        private firstNameChange(person: object, oldPerson: object) {   
        console.log(person, oldPerson)
      }
    } 
 </script>

@Emit

接受一个参数 event?: string, 如果没有的话会自动将 camelCase 转为 dash-case 作为事件名.
会将函数的返回值作为回调函数的第二个参数, 如果是 Promise 对象,则回调函数会等 Promise resolve 掉之后触发.
如果$emit 还有别的参数, 比如点击事件的 event , 会在返回值之后, 也就是第三个参数.

子组件:

<template>
  <div>
    <button @click="emitChange">Emit!!</button>
  </div>
</template>

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

    @Component
    export default class EmitComponent extends Vue {
      private count = 0
      @Emit("button-click") private emitChange() {
        this.count += 1
        return this.count
      }
    }
</script>

父组件, 父组件的对应元素上绑定事件即可:

<template>
  <EmitComponent v-on:button-click="listenChange" />
</template>

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

    @Component({ components: { EmitComponent } })
    export default class App extends Vue {
      private listenChange(value: number, event: any) {
        console.log(value, e)
      }
    }
</script>

@Ref 跟 react 中的一样, ref 是用于引用实际的 DOM 元素或者子组件.应尽可能避免直接使用, 但如果不得不用 ref 比 document 拿要方便很多, 参数传一个字符串refKey?:string, 注意这里如果省略传输参数, 那么会自动将属性名作为参数, 注意与@Emit的区别, @Emit在不传参数的情况下会转为 dash-case, 而 @Ref不会转, 为原属性名

<template>
  <div>
    <span>Name:</span>
    <input type="text" v-model="value" ref="name" />
  </div>
</template>
<script lang="ts"> 
    import { Component, Vue, Ref } from 'vue-property-decorator'

    @Component 
    export default class RefComponent extends Vue { 
      @Ref('name') readonly name!: string
      private value = '修'  
      private mounted() {   
        console.log(this.name)
      }
    }
</script>

@Provide/@inject && @ProvideReactive/@InjectReactive

其本质是转换为 inject 和 provide, 这是 vue 中元素向更深层的子组件传递数据的方式.两者需要一起使用.与 react 的 context 十分的像

任意代的子组件:

<template>
  <span>Inject deeper: {{ bar }}</span>
</template> 
<script lang="ts">
    import { Component, Vue, Inject } from "vue-property-decorator";

    @Component
    export default class InjectComponent extends Vue {
      @Inject()
      private bar!: string
      private mounted() {
        console.log(this.bar)
      }
    }
</script>

任意祖先元素:

<script lang="ts">
    import { Component, Vue, Provide } from "vue-property-decorator"
    export default class App extends Vue {
      @Provide()
      private bar = "deeper 修"
    }
</script>

方便很多, 如果为了避免命名冲突, 可以使用 ES6 的 Symbol 特性作为 key, 以祖先元素举例:

需要注意的是避免相互引用的问题, symbol 的引用最好放到组件外单独有个文件存起来.

export const s = Symbol()

父组件:

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

    export const s = Symbol()

    @Component
    export default class App extends Vue {
      @Provide(s)
      private bar = "deeper 修"
    }
</script>

子组件:

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

    import { s } from 'xxx'

    @Component
    export default class App extends Vue {
      @Inject(s) private baz = "deeper 修"
    }
</script>

@ProvideReactive/@InjectReactive 顾名思义就是响应式的注入, 会同步更新到子组件中.比如下例可以实现在 input 中的输入实时注入到子组件中父组件

<template>
  <div id="app">
    <input type="text" v-model="bar" />
    <InjectComponent />
  </div>
</template> 
<script lang="ts">
    import { Component, Vue, ProvideReactive } from "vue-property-decorator"

    export const s = Symbol();

    @Component({ InjectComponent })
    export default class App extends Vue {
      @ProvideReactive(s) private bar = "deeper 修"
    }
</script>

子组件:

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

   @Component
   export default class InjectComponent extends Vue {
     @InjectReactive(s) private baz!: string
   }
</script>

@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,
        checked: { // use `checked` as the prop which take the place of `value`
            type: Number, default: 0
        }
    },  // ... 
})

<template>
  <my-checkbox v-model="foo" value="some value"></my-checkbox>
</template>

上述代码相当于：

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

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

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

<script lang="ts">
    import { Vue, Component, Model } from "vue-property-decorator"
    @Component
    export class myCheck extends Vue {
      @Model("change", { type: Boolean }) checked!: boolean
    }
</script>

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

vue-property-decorator 使用

猜你喜欢

热点阅读