前端(组件间传参)
1父组件引用子组件，把参数传给子组件
父组件
<script setup>
import {useRouter} from "vue-router";
import Son from "./Son.vue";
let router=useRouter();
let name='王五'
function goSon(){
let o={
name:'son',
path:'/son',
}
router.push(o)
}
function coin(value){
console.log("爹给你钱了")
console.log("儿子给爹"+value+"元")
}
</script>
<template>
<button @click="goSon">去儿子组件</button>
<Son :name @xxx="coin"></Son>
</template>
<style scoped>
</style>
子组件接收参数并返回给父组件数据
<script setup>
import {useRouter,useRoute} from "vue-router";
let router=useRouter();
let route=useRoute();
function goFather(){
func('xxx',1000);
router.push('/father')
}
import {defineProps,defineEmits}from'vue'
let prop=defineProps(["name"]);
let func=defineEmits(['xxx']);
</script>
<template>
<button @click="goFather">去父亲组件</button>
{prop.name}
</template>
<style scoped>
</style>
测试结果
接收到父亲给的数据
返回给父亲数据
