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>