父组件向子组件传值
<template>
<div class="hello">
我是父组件
<!-- 父组件向子组件传递信息 -->
<Child :msg="msg"></Child>
</div>
</template>
<script lang="ts" setup>
import Child from './Child'
import {ref} from 'vue'
const msg = ref<string>('父组件信息:xxx');
</script>
<style scoped>
</style>
子组件接受父组件的消息需要从vue中引入defineProps方法
<template>
<!-- msg是父组件传递过了的值 -->
<div>我是子组件,父组件的值是{{msg}}</div>
</template>
<script lang="ts" setup>
import { toRefs } from 'vue'
const props = defineProps({
//子组件接收父组件传递过来的值
msg: String,
})
//父组件传递过来的值
const {msg} =toRefs(props)
</script>
<style>
</style>
子组件向父组件传递消息,需要引入defineEmits方法
<template>
<!-- msg是父组件传递过了的值 -->
<div>我是子组件,父组件的值是{{msg}}</div>
</template>
<script lang="ts" setup>
import { toRefs } from 'vue'
const emit = defineEmits(['testFunc'])
emit('testFunc', '子组件的消息')
</script>
<style>
</style>
父组件接收子组件消息
<template>
<div class="hello">
我是父组件
<!-- 父组件向子组件传递信息 -->
<Child :msg="msg" @testFunc="childMsg"></Child>
</div>
</template>
<script lang="ts" setup>
import Child from './Child'
import {ref} from 'vue'
const msg = ref<string>('父组件信息:xxx');
const childMsg = (val) => {
console.log('子组件传过来的消息:'+val)
}
</script>
<style scoped>
</style>
Vue3编程式导航的使用,需要从router中引入userRouter方法
import { useRouter } from 'vue-router';
使用userRouter
const router = useRouter();
let timer = setTimeout(() => {
router.push('/xxx')
}, 10000)