2.4、watch函数
④、watch侦听属性
<script>
import { ref,watch } from 'vue';
const count = ref(0)
const username =ref('xiaopaopao')
const setCount=()=>{
count.value++
}
const setUsername=()=>{
username.value='wahaha'
}
//调用侦听工具(函数)
watch(count,()=>{
console.log("侦听count,数据发生变化")
})
</script>
<template>
<button @click="setCount">{{count }}</button>
<button @click="setUsername">{{username }}</button>
</template>
1)侦听一个数据
2)侦听多个数据
//监听多个数据
<script>
import { ref,watch } from 'vue';
const count = ref(0)
const username =ref('小泡泡')
const setCount=()=>{
count.value++
}
const setUsername=()=>{
username.value='哇哈哈'
}
调用侦听工具(函数)
watch(count,()=>{
console.log("侦听count,数据发生变化")
})
//监听多个数据
watch([count,username],([newCount,newUsername],[oldCount,oldUsername])=>{
console.log("count或username的值发生变化了",[newCount,newUsername],[oldCount,oldUsername])
})
</script>
<template>
<button @click="setCount">{{count }}</button>
<button @click="setUsername">{{username }}</button>
</template>
3)深度侦听
深度侦听,默认情况属于浅层侦听,只能侦听至第一层,如果希望侦听对象里的属性需要配置深度侦听。
<script>
//配置深度侦听
const state =ref({
count:0,
id:0,
name:'gaga'
})
const setState = ()=>{
state.value.count++
}
const setStateName = ()=>{
state.value.name='haha'
}
watch(state,()=>{
console.log("state的count发生变化了")
},{
deep:true//开启深度侦听,如果对象中包含多个属性,所有属性默认都会被侦听,如果是多个参数,所有参数都会被侦听
})
</script>
<template>
<button @click="setState">{{state.count}}</button>
</template>
4)精确侦听
精确侦听,如果对象中有对个,希望只侦听某一个属性需要配置精确侦听。
<script>
const state =ref({
count:0,
id:0,
name:'gaga'
})
const setState = ()=>{
state.value.count++
}
const setStateName = ()=>{
state.value.name='haha'
}
watch(()=>state.value.count,()=>{
console.log("侦听了 对象的count属性")
})
</script>
<template>
<button @click="setState">{{state.count}}</button>
<button @click="setStateName">{{state.name}}</button>
</template>
2.5、生命周期函数
⑤、生命周期函数
1)组件从创建到销毁过程中称为生命周期,可以利用生命周期函数在创建或销毁过程中进行逻辑操作。
2)setup、onMounted加载时、onUnmounted组件卸载、onBeforeUpdate更新前、onUpdate
3)2.0版本的生命周期函数名,少on
<script>
//生命周期函数
import { onMounted } from 'vue';
onMounted(()=>{
console.log("调用了onMounted函数1")
})
onMounted(()=>{
console.log("调用了onMounted函数2")
})
onMounted(()=>{
console.log("调用了onMounted函数3")
})
</script>
2.6、父子通信
⑥、父子通信
1)父传子
父组件代码
<script>
//父子数据传递-父传子
import SonCom from './SonComponent.vue' //导入子组件
import { ref } from 'vue';
const count = ref(100)
//定时函数,在设定时间后执行,时间单位毫秒
//参数一:执行过程,参数二:设定时(时间毫秒)
setTimeout(()=>{count.value+=200},2000)
</script>
子组件代码
<script setup>
//子组件接受父组件传递过来的数据
const prop =defineProps({
message:String,
count:Number
})
console.log(prop)
// defineProps({
// message:String
// })
</script>
<template>
<h1>子组件</h1>
父组件传入的数据:{{ message }}<br>
响应数据{{ count }}
</template>
2)子传父
子组件代码
<script>
//子组件向父组件中传递数据
const emit = defineEmits(['get-son-message']) //声明向父组件传递数据
const sendMsg = ()=>{
emit('get-son-message','子组件中的数据') //向emit中存入数据,key值是创建emit时设置好的
}
</script>
<template>
<button @click="sendMsg">向父组件中传递数据</button>
</template>
父组件代码
<script>
// //父子数据传递-父传子
import SonCom from './SonComponent.vue' //导入子组件
import { ref } from 'vue';
const count = ref(100)
//定时函数,在设定时间后执行,时间单位毫秒
//参数一:执行过程,参数二:设定时(时间毫秒)
setTimeout(()=>{count.value+=200},2000)
const getSonMessage =(msg)=>{
console.log(msg)
}
</script>
<template>
<SonCom @get-son-message ="getSonMessage"> </SonCom>
</template>
3)获取页面元素
暴露数据
父组件
<script>
//获得页面元素
import SonCom from './SonComponent.vue'
import { ref,onMounted } from 'vue'
const refH1 = ref(null)
const refSoncom =ref(null)
onMounted(()=>{
console.log(refH1.value.innerText)
console.log(refSoncom.value)
})
</script>
<template>
<h1 ref="refH1">我是dom元素中的H1标记</h1>
<SonCom ref="refSoncom">向父组件中传递数据</SonCom>
</template>
子组件
<script>
//暴露属性
import { ref } from 'vue';
const name =ref('test vue')
defineExpose({
name
})
</script>