zoukankan      html  css  js  c++  java
  • [Vue + TS] Use Properties in Vue Components Using @Prop Decorator with TypeScript

    With properties we can follow a one-way parent→child flow communication between components. This lesson shows you how you can pass down properties to class based Vue components by using the @Prop decorator from vue-property-decorator.

    We’ll also see how we can set types and even default properties on @Prop!

     

    Install:

    npm install --save vue-property-decorator

    Child:

    <template>
      <div>
          {{fullMessage}}
      </div>
    </template>
    
    <script lang="ts">
    
    import Vue from 'vue'
    import {Component, Prop} from 'vue-property-decorator'
    
    @Component({})
    export default class Child extends Vue {
        message: string = "Hello";
        @Prop({
            type: String,
            default: 'Default Value'
        }) msg: string;
    
        get fullMessage() {
            return `${this.message},${this.msg}`;
        }
    }
    </script>

    Parent:

    <template>
      <div class="hello">
        <h1 v-colorDirective="{color: 'red', backgroundColor: 'blue'}">{{ message }}</h1>
        <button @click="clicked">Click</button>
        <ChildComp msg="'What a good day!'"/>
        <router-link to="/hello-ts">Hello Ts</router-link>
      </div>
    </template>
    
    <script lang="ts">
    import Vue from 'vue'
    import Component from 'vue-class-component'
    import colorDirective from '../color-directive';
    
    import ChildComp from './Child.vue';
    
    @Component({
      directives: {
        colorDirective
      },
      components: {
        ChildComp
      }
    })
    export default class Hello extends Vue {
      message: string = 'Welcome to Your Vue.js App'
    
      get fullMessage() {
        return `${this.message} from Typescript`
      }
    
      created() {
        console.log('created');
      }
    
      beforeRouteEnter(to, from, next) {
        console.log("Hello: beforeRouteEnter")
        next()
      }
    
      beforeRouteLeave(to, from, next) {
        console.log("Hello: beforeRouteLeave")
        next()
      }
    
      clicked() {
        console.log('clicked');
      }
    }
    </script>
  • 相关阅读:
    jQuery 选择器
    DOM 文档对象模型+倒计时
    javascript简单写出国际象棋棋盘
    javascript循环语句及函数
    JAVASCRIPT基础
    用纯CSS做的图片切换
    项目练习总结
    用CSS做的简单弹窗
    CSS布局元素
    jQuery属性/CSS使用例子
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7516304.html
Copyright © 2011-2022 走看看