vue学习记录
前言:最近在学习ts+vue页面交互,现在总结一下。目录积累的大致有如下几点:prop装饰器、Emit装饰器、Model装饰器、Watch、created钩子函数、Component。
详解:
1. Component:这个一般用来用来定义默认div名称和接收请求的页面。具体代码如下
原始代码:
export default{ name:"About", data(){ 数据 return{ xxx }, copmput:{ //计算属性方法 (){ getfullName(){ return this.firstName+' '+lastName }, set(val){ } } } } }
现在如下:
import {Component,Vue,Watch} from 'vue-property-decorator'
import User from './user.vue' //后缀必须写全
@Component({ name:"名称" components:{User} })
2. 钩子函数:created :初始值的时候进行初始化值,比如这样
//钩子函数 created(){ this.fullName="wang wu"; }
3. 计算属性,get,set:
原本:看上面第一个copmput
现在:直接定义get和set方法
get fullName(){ return this.firstName+' '+this.lastName } set fullName(val){ const arr=val.split(" "); this.firstName=arr[0]; this.lastName=arr[1]; }
4. Watch:用来监听数据变化
//监听firstName的变化 @Watch('firstName') suib(newval,oldval) //suib :随便起的名字,前面是新的,后面是久的 { console.log(newval,oldval); }
5. 向子页面传递值
<!-- 向页面中传递过去了列表中的数据 传递id 把数据全部发送国庆 on-remove和chage-age:子页面发送过来的方法 传递值firstName -->
<user v-for="item in userList" :key="item.id" v-bind="item" @on-remove="remove" @chage-age="chageAGE" v-model="firstName"></user>
6. Prop 子页面怎么接收父页面v-bind 传递过来的值? 备注:v-bind:就是把所有的数据都传递了过来。然后通过下面的方式接收
@Prop(Number) id!:number; @Prop([String,Number]) name:string|Number; @Prop(Number) age!:number; @Prop({type:Number,default:1}) sex!:number;
7. Emit 子页面给父页面传值:两种传递方式,其中remove是代码中定义的方法
html------
<button @click="chageAge(id)">年龄+1</button> <button @click="remove(id)">删除</button>
ts-------- @Emit('on-remove') remove(id){ return id; //如果不写,也会默认传递过去id } @Emit() //如果不写名,那么父组件调用的就是它的chageAge,并且会将驼峰式的改为chage-age chageAge(id:number) { }