vue中使用ts
在vue中使用ts是需要有一定的ts基础的,如果对于ts小白的话还是推荐先看一下ts官网,先了解基础以后这样使用起来才会事半功倍。
1.下载依赖项
npm install --save vue-property-decorator
2.vue-property-decorator和vue-class-decorator的区别
vue-property-decorator是社区出的,vue-class-decorator是官网出的,我们可以理解为vue-property-decorator是vue-class-decorator的超集,里面封装了很多的装饰器,我们一般在项目中使用vue-property-decorator即可
子传父
父组件
<template>
<div class="hello">
{{str}}
<Home @hello="onClick"/>
</div>
</template>
<script lang="ts">
import {Vue,Component} from 'vue-property-decorator'
//引入子组件,在中Component创建
import Home from './home.vue';
@Component({
components: {
Home
}
})
//在script方面还是比起js有一定的差距的,这里需要大家好好琢磨一下
export default class App extends Vue {
// 初始化数据 data可以声明成类属性形式
str:String=""
// 接收子组件传递过来的值
onClick(res:String){
this.str=res;
}
}
</script>
子组件
<template>
<div @click="hello">
点击我给父组件传递值
</div>
</template>
<script lang="ts">
import {Vue,Component,Emit} from 'vue-property-decorator'
@Component({})
export default class Home extends Vue{
msg= '子传父'
// 装饰器中的参数是方法名
@Emit("hello")
emitTodo():number{
return 12
}
// 和原本的vue一样,子传父使用方法来传递,引用一个@emit
hello(){
this.emitTodo()
}
}
</script>
父传子
父组件
<template>
<div class="hello">
<Home :chuan="chuan"/>
</div>
</template>
<script lang="ts">
import {Vue,Component} from 'vue-property-decorator'
//引入子组件,在中Component创建
import Home from './home.vue';
@Component({
components: {
Home
}
})
export default class App extends Vue {
// 初始化数据 data可以声明成类属性形式
chuan:String="父传子的值"
}
</script>
子组件
<template>
<div>
{{chuan}}
</div>
</template>
<script lang="ts">
import {Vue,Component,Prop} from 'vue-property-decorator'
@Component({})
export default class Home extends Vue{
@Prop(String) chuan!: String;
}
</script>
基本的方法还是和以前的组件传值是一样的,只不过是使用了ts的语法和使用到了vue-property-decorator依赖项
网友评论