[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>
[Vue + TS] Use Properties in Vue Components Using @Prop Decorator with TypeScript的更多相关文章
- [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 ...
- [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 ...
- 【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践
1.使用官方脚手架构建 新的 VueCLI工具允许开发者 使用 TypeScript 集成环境 创建新项目. 只需运行 vue createmy-app. 然后,命令行会要求选择预设.使用箭头键选择 ...
- vue + ts Vuex篇
Vuex对Typescript的支持,仍十分薄弱,官方库只是添加了一些.d.ts声明文件,并没有像vue 2.5这样内置支持. 第三方衍生库 vuex-typescript, vuex-ts-deco ...
- vue+ts搭建项目
Tip: 为了避免浪费您的时间,本文符合满足以下条件的同学借鉴参考 1.本文模版不适用于小型项目,两三个页面的也没必要用vue2.对typescript.vue全家桶能够掌握和运用 此次项目模版主要涉 ...
- [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 ...
- Vue源码学习三 ———— Vue构造函数包装
Vue源码学习二 是对Vue的原型对象的包装,最后从Vue的出生文件导出了 Vue这个构造函数 来到 src/core/index.js 代码是: import Vue from './instanc ...
- 实例PK(Vue服务端渲染 VS Vue浏览器端渲染)
Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...
- Vue服务端渲染和Vue浏览器端渲染的性能对比
Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...
随机推荐
- 4.菜鸟教你一步一步开发 web service 之 axis 客户端创建
转自:https://blog.csdn.net/shfqbluestone/article/details/37723517 在上个教程中我们创建了一个 axis 服务端的 web service ...
- nginx假死导致的问题回顾
背景: 网络大致拓扑型 定位到一台Nginx节点于凌晨Timewait异常,等到6K. 进程异常,ngx_http_realtime_request模块错误 错误日志: 2017/02/24 00:0 ...
- appid、appkey、appsecret、accesstoken,消息模板
app_id, app_key, app_secret , 对于平台来说, 需要给你的 你的开发者账号分配对应的权限:1. app_id 是用来标记你的开发者账号的, 是你的用户id, 这个id 在数 ...
- 紫书 例题 9-9 UVa 10003 (区间dp+递推顺序)
区间dp,可以以一个区间为状态,f[i][j]是第i个切点到第j个切点的木棍的最小费用 那么对于当前这一个区间,枚举切点k, 可以得出f[i][j] = min{dp(i, k) + dp(k, j) ...
- 紫书 例题 9-8 UVa 1625 (滚动数组+公共字符串处理)
这题看题解看了很久,学到了挺多(自己还是太弱,唉!) (1)这道题的思路非常的巧妙.我一开始看到就觉得不好来记录开始位置以及 结束位置.但是题解换了一个思路,记录每一次开始了但还没有结束的字符有多少个 ...
- 洛谷 P1683 入门
P1683 入门 题目描述 不是任何人都可以进入桃花岛的,黄药师最讨厌象郭靖一样呆头呆脑的人.所以,他在桃花岛的唯一入口处修了一条小路,这条小路全部用正方形瓷砖铺设而成.有的瓷砖可以踩,我们认为是安全 ...
- ios开发之-计算器的改进
#import <Foundation/Foundation.h> extern double add(double x,double y); extern double subtract ...
- 修正EasyUI的BUG——Form中存在FileBox时的数据载入错误
使用EasyUI载入服务端返回的数据时经常使用 $('#fm').form('load', row); 实现,既方便又简洁,可是.当Form中包括有FileBox时,代码就会报错,经过跟踪发现.由于E ...
- 目标决定人生——没有目标就失去一切 (没有目标的奋斗是浪费青春,比如交了钱却不去参加考试、让时间白白溜走。根据目标与定位来选择最合适的企业。人生要算总账)good
没有目标就失去一切 刚毕业那会儿,幼稚得可笑,老跟同学打电话,明面上聊聊近况,暗地里比较.你要比我工资多一百块,心里特不平衡,凭什么呀,在学校那会儿公认的我比你强.你要带个头衔,而我啥也不是,普通员工 ...
- 【基础篇】点击Button按钮更换图片
我们在开发的过程中,往往为了美化界面的需要,会修改按钮的默认外观,而因为Android中的按钮有三种状态—默认,被点击,被选中.所以,如果要改变按钮的外观,需要对这三种情况都做出修改,也许在以往,我们 ...