<script setup>
import { ref , defineProps , defineEmits , onBeforeMount , onBeforeUnmount , watch} from 'vue'
//父组件传参接收方式同vue2
//子组件接收方法
const props = defineProps(["showPassword"])
//子组件发送方式
const emit = defineEmits(['changePassword'])
const close=()=>{
show.value=false
emit('changePassword',1)
//1关闭 2成功
}
//实现双向绑定使用ref
const show=ref(props.showPassword)
//挂载前的生命周期
onBeforeMount(()=>{
})
//销毁前的生命周期
onBeforeUnmount(()=>{
})
//数据监听
const from=ref({ name:'',})
const stopWatch = watch(from, (newValue, oldValue) => {
console.log(newValue, oldValue)
},{deep: true})
// 加上{deep: true}则修改from中的name属性也会触发监听
//路由跳转
import {useRoute, useRouter} from "vue-router";
const route=useRoute() //获取路由参数
const router=useRouter() //路由跳转
//push方法:
//作用:将新的路由添加到导航历史记录中。
//效果:在导航过程中,会向应用程序的历史记录中添加新的路由,从而可以通过后退按钮回到之前的路由。新的路由将成为历史记录中的当前活动路由。
//示例代码:router.push('/new-route')
// replace方法:
//作用:用新的路由替换当前的活动路由。
//效果:在导航过程中,会将当前的活动路由替换为新的路由,并且不会在历史记录中创建额外的记录。这意/味着无法通过后退按钮返回到之前的路由。
//示例代码:router.replace('/new-route')
</script>
vue3 基础功能总结
于 2024-03-28 17:07:14 首次发布