vue3 基础功能总结

原创已于 2024-06-17 11:47:55 修改 · 176 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2024-03-28 17:07:14 首次发布

本文详细介绍了在Vue3中如何使用props进行父组件向子组件传递参数，通过emits进行事件通讯，以及如何实现ref进行双向数据绑定和生命周期管理，包括挂载前、销毁前的钩子以及深度监听数据变化。

<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>