在Vue+JavaScript模式中,我们在组件中使用component、watch、model、emit属性时,都是直接使用的.然而在Vue+TypeScript开发模式中.我们需要通过引入相应的构造器,在构造器中进行声明使用数据.
// 在Vue+TypeScript开发模式中引入相应的构造器进行界面开发
<script lang="ts">
import { Component,Vue,Watch,Prop,Model,Emit} from 'vue=property-decorator'; // 引入相应的构造器
@Component({ // ...通过在构造器Component中注册组件
name:"当前页面的名称",
components:{
...组件的注册
}
})
export default class 页面名称 extends Vue{ // 通过继承Vue构造器,在该类里面书写初始化数据
// 在Vue+JavaScript开发模式中写在data属性中的数据,直接在类里面书写
变量名:变量类型= 初始值
// 在Vue+TypeSCript开发模式中,计算属性的声明通过在类里面使用 get与set关键字声明
get 方法名(){ //用于获取属性, 一般我们常用 get 关键字即可
....逻辑代码
return 返回值
}
set 方法名(params){ //用于设置属性, 不常用
...逻辑代码
return返回值
}
// 在Vue+TypeScript开发模式中事件执行方法的声明通过直接在类里面直接书写执行方法
handleClick(){ // 监听页面点击事件
...逻辑代码
}
// Vue+TypeScript开发模式中,生命周期的调用还是与Vue+JavaScript开发模式中的写法一致.直接书写生命周期方法
created(){
...代码逻辑
}
mounted(){
...代码逻辑
}
</script>
(1)如何使用Component构造器
//(1) 在父组件中 如: Home.vue文件
<template>
<div id="Home">
<News></News> // 使用组件News
</div>
</template>
<script lang="ts">
import { Component,Vue } from 'vue-property-decorator'; // 引入Component构造器
import News from '@/components/Home/News/index.vue'; // 引入组件(在Vue+TypeScript开发模式中,引入组件时,路径必须写完整,后缀必须写上)
@Component({
name:'Home', // 定义父组件名称
components:{
News, // 注册组件
}
})
</script>
//(2) 在子组件中 如:News文件夹下的index.vue文件
<template>
<div id="News">
<h1>This is News Page</h1> // 组件功能
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'; // 引入相关构造器
@Component({
name:"News" // 声明组件名称
})
export default class News extends Vue{
...代码逻辑
}
</script>
(2)如何使用Watch构造器
// 在Home.vue文件中
<template>
<div id="Home">
</p>{{msg}}</p>
<button @click="handleClcik">变化</button> // 通过点击事件使msg值变化
</div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'; // 引入相关构造器
@Component({
name:"Home" // 声明当前组件名称
})
export default class Home extends Vue{
msg="TypeScriptAndVue"; // 声明变量msg;
// 声明事件(在Vue+TypeScript开发模式中,事件方法的声明方式直接在类中正常声明即可)
handleClick(){ // 监听一个点击事件
this.msg="VueAndTypeScript";
}
// 使用Watch构造器监听属性的变化
@Watch('msg')
handleMsgChange(newVal:string,oldVal:string){
console.log('新的msg变量值为:'+newVal);
console.log('旧的msg变量值为:'+oldVal);
}
}
</script>
(3)如何使用Prop构造器
//(1) 在父组件中,如: Home.vue文件
<template>
<div id="Home">
<News :msg="message"></News> // 使用组件,通过v-bind属性绑定msg,传递值为messga变量的内容
</div>
</template>
<script lang="ts">
import { Vue,Component } from 'vue-property-decorator';
import News from '@/components/Home/News/index.vue'; // 引入组件News
@Component({
name:"Home", // 声明当前组件名称
components:{
News, // 注册组件News
}
})
export default class Home extends Vue{
message ="TypeScript"; // 声明变量message并赋初始值
}
</script>
//(2) 在子组件中, 如: News文件夹下的index.vue文件
<template>
<div di="News">
<p>{{msg}}</p> // 使用传递进来的数据
</div>
</template>
<script lang="ts">
import { Vue, Component,Prop } from 'vue-property-decorator'; // 引入相关构造器
@Component({
name:'News' // 声明组件名称
})
export default class News extends Vue{
// 使用Prop构造器接收传递进来的数据
@Prop({type:String,default:''}) // 这里type处的数据类型首字母必须大写
msg!:string; // 使用非空断言 '!'(若是不使用会报错)
}
</script>
(4)如何使用Emit构造器
//(1) 在子组件中,如: News文件夹下的index.vue文件中
<template>
<div id="News">
<ul>
<li v-for="item in user" :key="item.id" @click="handleClick">{{item.name}}</li>
</ul>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Emit } from 'vue-property-decorator'; // 引入相关构造器
// 定义接口User,接口首字母必须大写
interface User{
id:number;
name:string;
}
// 组件管理
@Component({
name:"News" // 当前组件名称
})
export default class News extends Vue{
// 使用Prop构造器接收父组件传递进来的数据
@Prop({type:Array,default:[]})
user!: Array<User>; // 使用非空断言 '!'(若是不使用会报错)
// 使用Emit构造器向父组件发送消息
@Emit("receiveInfo") // 通过点击事件handleClick发送自定义事件receiveInfo,同时传递信息 item
handleClick(item:User){
return item;
}
}
</script>
//(2) 在父组件中,如: Home.vue文件
<template>
<div id="Home">
<News :user="users" @receiveInfo="handleChild"></News> // 使用组件,传递users数据,同时监听自定义事件receiveInfo以获取子组件传递的消息
</div>
</template>
<script lang="ts">
import { Vue,Component } from 'vue-property-decorator';
import News from '@/components/Home/News/index.vue'; // 引入组件
// 定义User接口
interface User{
id:number;
name:string;
}
// 组件管理
@Component({
name:"Home",
components:{
News
}
})
export default class Home extends Vue{
// 初始化从数据
users:Array<User>=[
{
id:1,
name:"动漫"
},
{
id:2,
name:"游戏"
}
]
}
// 事件处理
handleChild(item: User){ // 接收子组件传递过来的参数
...代码逻辑
console.log('我接收到了:'+item.name)
}
</script>
(5)如何使用Model构造器(在子组件中通过input标签元素修改父组件中的数据)
//(1) 在父组件中,如: Home.vue文件
<template>
<div id="Home">
<p>{{message}}</p>
<News v-model="messgae"></News> // 使用组件News,同时通过v-model属性传递数据变量message的值
</div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import News from "@/components/Home/News/Index.vue"; // 引入组件
export default class Home extends Vue{
message="VueAndTypeScript"; // 变量初始化
}
</script>
//(2) 在子组件中, 如: News文件夹下的index.vue文件
<template>
<div id="News">
<label>
改变父组件中的message数据:
<input @input="handleInput" :value="msg" @input="handleInput"/> //通过v-bind属性将父组件传递的数据绑定给input标签,同时监听input标签的input事件
</label>
</div>
</template>
<script lang="ts">
import { Vue,Component, Emit, Model } from "vue-property-decorator"; // 引入模块
@Component({ // 组件管理
name:"News"
})
// 继承类
export default class News extends Vue{
@Model('receiveChange',{ type: String }) // 使用Model构造器接收从父组件中通过v-model传递数据,同时声明自定义事件receiveChange
msg!: string;
@Emit("receiveChange") // 通过Emit构造器发送自定义事件receiveChange,通过input事件方法handleInput将改变后的值传递给父组件
handleInput(e: any ){
return e.target.value
}
}
</script>
版权声明：本文为Linux_MK原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。