vue学习记录

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)
    {
        
    }