vue2、3复习01-对props校验，自定义事件，自定义事件传参，组件上的v-model，watch侦听器，侦听器的immediate、deep选项，侦听对象中单个属性的变化

最新推荐文章于 2023-11-22 17:05:32 发布

心湖中的石子

最新推荐文章于 2023-11-22 17:05:32 发布

阅读量773

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43745804/article/details/121274506

版权

Vue 专栏收录该内容

48 篇文章 15 订阅

订阅专栏

1、对props校验

使用validator函数进行校验

props:{
      name:String,
      age:[Number,String],
      address:String,
      count:{
        type:Number,
        require:true,
        default:100
      },
      type:{
        validator(value){
          return ['success','fail'].indexOf(value)!==-1
        }
      }
    }

<template>
  <div>{{name}}</div>
  <div>{{age}}</div>
  <div>{{address}}</div>
  <div>{{count}}</div>
</template>

<script>
  export default {
    name: 'PersonData',
    props:{
      name:String,
      age:[Number,String],
      address:String,
      count:{
        type:Number,
        require:true,
        default:100
      },
      type:{
        validator(value){
          return ['success','fail'].indexOf(value)!==-1
        }
      }
    }
  }
</script>

<style scoped>

</style>

2、自定义事件

自定义事件要先申明后触发（使用）事件
申明事件：emit：[‘事件名’]
触发事件：this.$emit(‘自定义事件的名称’)

使用组件时，监听自定义事件
@自定义事件名

1、在组件内定义及触发事件

<template>
  <div>here is some data:{{count}}</div>
  <button @click="addcount">changedata</button>
</template>

//定义事件
    emits:['countChange'],
    methods:{
      addcount(){
        //改变count值
        this.count++
        //触发（发射）自定义事件
        this.$emit('countChange')
      }
    }

2、在父组件监听并执行时间

<template>
  app<br/>
  <PersonData @countChange="addCount"></PersonData>
</template>

 methods:{
    addCount(){
      console.log('count is changinge')
    },

  },

3、完整代码
1、子组件

<template>
  <div>here is some data:{{count}}</div>
  <button @click="addcount">changedata</button>
</template>

<script>
  export default {
    name: 'PersonData',
    data () {
      return {
        count:12
      }
    },
    computed: {

    },
    //定义事件
    emits:['countChange'],
    methods:{
      addcount(){
        //改变count值
        this.count++
        //触发（发射）自定义事件
        this.$emit('countChange')
      }
    }
  }
</script>

<style scoped>

</style>

2、父组件

<template>
  app<br/>
  <PersonData @countChange="addCount"></PersonData>
</template>

<script>
import PersonData from './components/PersonData.vue'

export default {
  name: 'App',
  data(){
    return {

    }
  },
  methods:{
    addCount(){
      console.log('count is changinge')
    },

  },
  components: {
    PersonData
  }
}
</script>

<style scoped>

</style>

3、自定义事件传参

子组件代码修改为

 //定义事件
    emits:['countChange'],
    methods:{
      addcount(){
        //改变count值
        this.count++
        //触发（发射）自定义事件
        this.$emit('countChange',this.count)
      }
    }

父组件代码修改为：

methods:{
    addCount(count){
      console.log('count is changinge,the last number is '+count)
    },

  },

4、组件上的v-model

实际就是组件内外的数据同步
在这里插入图片描述

1、子组件

这里在自定义事件时，一定要用update：变量的形式，这里update是固定写法，不要自定义
触发自定义事件的时候，也要使用update，和定义的时候是一致的

<template>
  <div>the age is:{{age}}</div>
  <button @click="addage">subAddAge</button>
</template>

<script>
  export default {
    name: 'PersonData',
    data () {
      return {

      }
    },
    props:['age'],
    //这里必须要使用update
    emits:['update:age'],
    methods:{
      addage(){
        //emit的自定义事件的格式一定要和定义的时候一直
        this.$emit('update:age',this.age+1)
      }
    }
  }
</script>

<style scoped>

</style>

2、父组件

子向父组件传值是，父组件对应的属性一定要使用v-model双向绑定，而不是单向的v-bind（语法糖为冒号：）
另外：
v-model原理：

v-model 其实是一个语法糖，它的背后本质上是包含两个操作：

v-bind绑定一个value属性
v-on指令给当前元素绑定input事件

<template>
  app<br/>
  <div>{{age}}</div>
  <button @click="addage">fatherAddAge</button>
  <hr/>
<!--  这里一定要用v-model来进行双向绑定绑定-->
  <PersonData v-model:age="age"></PersonData>
</template>

<script>
import PersonData from './components/PersonData.vue'

export default {
  name: 'App',
  data(){
    return {
      age:19
    }
  },
  methods:{
    addage(){
      this.age++
    }

  },
  components: {
    PersonData
  }
}
</script>

<style scoped>

</style>

5、watch侦听器

就是侦听数据的变化，往往是和背侦听变量同名的侦听器函数
侦听器函数有两个形参，一个是新值，一个是旧值
侦听器需要一个watch节点

watch:{
    age(newVal,preVale){
      console.log(newVal,preVale)
    }
  },

完整代码

<template>
  app<br/>
  <div>{{age}}</div>
  <button @click="addage">fatherAddAge</button>
  <hr/>

</template>

<script>
import PersonData from './components/PersonData.vue'

export default {
  name: 'App',
  data(){
    return {
      age:19
    }
  },
  methods:{
    addage(){
      this.age++
    }

  },
  watch:{
    age(newVal,preVale){
      console.log(newVal,preVale)
    }
  },
  components: {
    PersonData
  }
}
</script>

<style scoped>

</style>

6、watch侦听器的immediate选项

watch侦听数据变化后立即执行
要把侦听器函数写成对象形式，同时要创建一个handle函数，这里handle是固定写法，不可以自定义
添加immediate：true属性

watch:{
    checkusername:{
      async handle(newValue,oldValue){
        const {data:res}=await axios('xxxxx'+newValue)
        console.log(res)
      }
    }
  },

完整代码：

<template>
  app<br/>
  <div>{{age}}</div>
  <button @click="addage">fatherAddAge</button>
  <hr/>

</template>

<script>
import PersonData from './components/PersonData.vue'
import axios from 'axios'
export default {
  name: 'App',
  data(){
    return {
      age:19
    }
  },
  methods:{
    addage(){
      this.age++
    }

  },
  watch:{
    checkusername:{
      async handle(newValue,oldValue){
        const {data:res}=await axios('xxxxx'+newValue)
        console.log(res)
      }
    }
  },
  components: {
    PersonData
  }
}
</script>

<style scoped>

</style>

7、watch侦听器的deep选项

当watch侦听的是一个对象的话，如果属性的值发生改变的话，是无法被监听到的，因此要使用deep选项
deep好比深拷贝，因为对象数据在复制时，也要深拷贝，用的也是deep

<template>
  app<br/>
  <div>{{info.age}}</div>
  <button @click="addage">fatherAddAge</button>
  <hr/>

</template>

<script>
import PersonData from './components/PersonData.vue'
import axios from 'axios'
export default {
  name: 'App',
  data(){
    return {
      info:{
        age:19
      }

    }
  },
  methods:{
    addage(){
      this.info.age++
    }

  },
  watch:{
    info:{
      async handle(newValue){
      //注意要把info的age解析出来
        const {data:res}=await axios('xxxxx'+newValue.age)
        console.log(res)
      }
    }，
    deep:true
  },
  components: {
    PersonData
  }
}
</script>

<style scoped>

</style>

8、watch侦听对象中单个属性的变化

侦听单个属性就使用具体对象属性的访问链

<template>
  app<br/>
  <div>{{info.age}}</div>
  <button @click="addage">fatherAddAge</button>
  <hr/>

</template>

<script>
import PersonData from './components/PersonData.vue'
import axios from 'axios'
export default {
  name: 'App',
  data(){
    return {
      info:{
        age:19,
        name:'zhangsan'
      }

    }
  },
  methods:{
    addage(){
      this.info.age++
    }

  },
  watch:{
    //侦听单个属性就使用具体对象属性的访问链
    'info.age':{
      async handle(newValue){
        const {data:res}=await axios('xxxxx'+newValue)
        console.log(res)
      }
    }
  },
  components: {
    PersonData
  }
}
</script>

<style scoped>

</style>

心湖中的石子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue2、3复习01-对props校验，自定义事件，自定义事件传参，组件上的v-model，watch侦听器，侦听器的immediate、deep选项，侦听对象中单个属性的变化

1、对props校验使用validator函数进行校验props:{ name:String, age:[Number,String], address:String, count:{ type:Number, require:true, default:100 }, type:{ validator(value){ return ['success
复制链接

扫一扫

专栏目录