当前位置 主页 > 服务器问题 > Linux/apache问题 > 最大化 缩小

    vue-property-decorator用法详解

    栏目:Linux/apache问题 时间:2019-12-13 10:46

    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>
    
    
    
    下一篇:没有了