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>

[Vue + TS] Use Properties in Vue Components Using @Prop Decorator with TypeScript的更多相关文章

  1. [Vue +TS] Use Two-Way Binding in Vue Using @Model Decorator with TypeScript

    Vue models, v-model, allow us to use two-way data binding, which is useful in some cases such as for ...

  2. [Vue + TS] Using Route events inside Vue

    vue-router introduces new hooks into the component. In this lesson we’ll show you how to use these n ...

  3. 【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

    1.使用官方脚手架构建 新的 VueCLI工具允许开发者 使用 TypeScript 集成环境 创建新项目. 只需运行 vue createmy-app. 然后,命令行会要求选择预设.使用箭头键选择  ...

  4. vue + ts Vuex篇

    Vuex对Typescript的支持,仍十分薄弱,官方库只是添加了一些.d.ts声明文件,并没有像vue 2.5这样内置支持. 第三方衍生库 vuex-typescript, vuex-ts-deco ...

  5. vue+ts搭建项目

    Tip: 为了避免浪费您的时间,本文符合满足以下条件的同学借鉴参考 1.本文模版不适用于小型项目,两三个页面的也没必要用vue2.对typescript.vue全家桶能够掌握和运用 此次项目模版主要涉 ...

  6. [Vue + TS] Create Type-Safe Vue Directives in TypeScript

    Directives allow us to apply DOM manipulations as side effects. We’ll show you how you can create yo ...

  7. Vue源码学习三 ———— Vue构造函数包装

    Vue源码学习二 是对Vue的原型对象的包装,最后从Vue的出生文件导出了 Vue这个构造函数 来到 src/core/index.js 代码是: import Vue from './instanc ...

  8. 实例PK(Vue服务端渲染 VS Vue浏览器端渲染)

    Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...

  9. Vue服务端渲染和Vue浏览器端渲染的性能对比

    Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...

随机推荐

  1. 4.菜鸟教你一步一步开发 web service 之 axis 客户端创建

    转自:https://blog.csdn.net/shfqbluestone/article/details/37723517 在上个教程中我们创建了一个 axis 服务端的 web service ...

  2. nginx假死导致的问题回顾

    背景: 网络大致拓扑型 定位到一台Nginx节点于凌晨Timewait异常,等到6K. 进程异常,ngx_http_realtime_request模块错误 错误日志: 2017/02/24 00:0 ...

  3. appid、appkey、appsecret、accesstoken,消息模板

    app_id, app_key, app_secret , 对于平台来说, 需要给你的 你的开发者账号分配对应的权限:1. app_id 是用来标记你的开发者账号的, 是你的用户id, 这个id 在数 ...

  4. 紫书 例题 9-9 UVa 10003 (区间dp+递推顺序)

    区间dp,可以以一个区间为状态,f[i][j]是第i个切点到第j个切点的木棍的最小费用 那么对于当前这一个区间,枚举切点k, 可以得出f[i][j] = min{dp(i, k) + dp(k, j) ...

  5. 紫书 例题 9-8 UVa 1625 (滚动数组+公共字符串处理)

    这题看题解看了很久,学到了挺多(自己还是太弱,唉!) (1)这道题的思路非常的巧妙.我一开始看到就觉得不好来记录开始位置以及 结束位置.但是题解换了一个思路,记录每一次开始了但还没有结束的字符有多少个 ...

  6. 洛谷 P1683 入门

    P1683 入门 题目描述 不是任何人都可以进入桃花岛的,黄药师最讨厌象郭靖一样呆头呆脑的人.所以,他在桃花岛的唯一入口处修了一条小路,这条小路全部用正方形瓷砖铺设而成.有的瓷砖可以踩,我们认为是安全 ...

  7. ios开发之-计算器的改进

    #import <Foundation/Foundation.h> extern double add(double x,double y); extern double subtract ...

  8. 修正EasyUI的BUG——Form中存在FileBox时的数据载入错误

    使用EasyUI载入服务端返回的数据时经常使用 $('#fm').form('load', row); 实现,既方便又简洁,可是.当Form中包括有FileBox时,代码就会报错,经过跟踪发现.由于E ...

  9. 目标决定人生——没有目标就失去一切 (没有目标的奋斗是浪费青春,比如交了钱却不去参加考试、让时间白白溜走。根据目标与定位来选择最合适的企业。人生要算总账)good

    没有目标就失去一切 刚毕业那会儿,幼稚得可笑,老跟同学打电话,明面上聊聊近况,暗地里比较.你要比我工资多一百块,心里特不平衡,凭什么呀,在学校那会儿公认的我比你强.你要带个头衔,而我啥也不是,普通员工 ...

  10. 【基础篇】点击Button按钮更换图片

    我们在开发的过程中,往往为了美化界面的需要,会修改按钮的默认外观,而因为Android中的按钮有三种状态—默认,被点击,被选中.所以,如果要改变按钮的外观,需要对这三种情况都做出修改,也许在以往,我们 ...