前言：vue3相对于vue2的父子传参方式有所改变，本文介绍三种：父组件给子组件传参、父组件调用子组件内的方法、子组件调用父组件的方法，如果不需要一种一种看可以直接下滑看全部代码，有注释也蛮好理解
1、父组件给子组件传参时，父组件这边的方式没有改变，还是在子组件上用 :xxx=“要传的参数”
2、子组件接收时要用defineProps方法来接收，接收时要用父组件定义的那个xxx一样
3、和vue2一样，在defineProps里面接收到的参数可以直接在html里面使用，相当于已经定义过
<template>
<div :style="{
border: '1px solid red',
}">
我是首页，父组件
<Title :parMsg="myMsg"></Title>
</div>
</template>
<script>
export default {
name: "dashboard",
};
</script>
<script setup>
import Title from "@/components/title/index.vue";
import { ref } from "vue";
//传给子组件的参数
const myMsg = ref("我来自父组件");
</script>
<style lang="scss" scoped></style>
<template>
<div
:style="{
border: '1px solid green',
}"
>
<div>子组件组件</div>
<div>父组件传过来的参数：{{ parMsg }}</div>
</div>
</template>
<script>
export default {
name: "title",
};
</script>
<script setup>
import { ref } from "vue";
//接受父组件传过来的参数
const props = defineProps({
parMsg: {
type: String,
default: "",
},
});
</script>
<style lang="scss" scoped></style>
页面上呈现的效果如下图：
1、父组件里需要给子组件标签加ref，然后用ref.value.子组件内的方法名调用
2、子组件内的方法要用defineExpose抛出
<template>
<div :style="{
border: '1px solid red',
}">
我是首页，父组件
<Title ref="sonRef" :parMsg="myMsg"></Title>
<el-button @click="sonFn">调用子组件的方法</el-button>
</div>
</template>
<script>
export default {
name: "dashboard",
};
</script>
<script setup>
import Title from "@/components/title/index.vue";
import { ref } from "vue";
//传给子组件的参数
const myMsg = ref("我来自父组件");
//父组件调用子组件的方法
const sonRef = ref();
const sonFn = () => {
sonRef.value.ParentOpSon("11111父组件给子组件里的方法传的参数");
};
</script>
<style lang="scss" scoped></style><template>
<div
:style="{
border: '1px solid green',
}"
>
<div>子组件组件</div>
<div>父组件传过来的参数：{{ parMsg }}</div>
<div>父组件调用子组件方法传入的参数:{{ sonMsg2 }}</div>
</div>
</template>
<script>
export default {
name: "title",
};
</script>
<script setup>
import { ref } from "vue";
//接受父组件传过来的参数
const props = defineProps({
parMsg: {
type: String,
default: "",
},
});
//定义子组件的函数
const sonMsg2 = ref("");
const ParentOpSon = (parentMsg) => {
sonMsg2.value = parentMsg;
};
//抛出之后父组件才能调用该函数
defineExpose({
ParentOpSon,
});
</script>
<style lang="scss" scoped></style>页面上的效果如下图：
点击调用子组件的参数按钮，就会出现红框里的字，证明父组件调用了子组件里的方法并且传参成功
1、父组件需要在子组件标签上加@xxx="func"，func是要给子组件调用的函数，xxx随便定义一个名字用来和子组件通信
2、子组件首先要调用defineEmits（）赋值给我们定义的emit（这个名字随便），然后用emit（“父组件内定义的xxx”,“子组件给父组件传的参数”）来调用
<template>
<div :style="{
border: '1px solid red',
}">
我是首页，父组件
<Title ref="sonRef" :parMsg="myMsg" @parentFn="parFn"></Title>
<el-button @click="sonFn">调用子组件的方法</el-button>
<div>子组件调用父组件传入的参数：{{ sonMsg }}</div>
</div>
</template>
<script>
export default {
name: "dashboard",
};
</script>
<script setup>
import Title from "@/components/title/index.vue";
import { ref } from "vue";
//传给子组件的参数
const myMsg = ref("我来自父组件");
//父组件调用子组件的方法
const sonRef = ref();
const sonFn = () => {
sonRef.value.ParentOpSon("11111父组件给子组件里的方法传的参数");
};
//子组件调用父组件的方法
const sonMsg = ref(); //用来存子组件传过来的参数
const parFn = (e) => {
console.log(e);
sonMsg.value = e;
};
</script>
<style lang="scss" scoped></style>
<template>
<div
:style="{
border: '1px solid green',
}"
>
<div>子组件组件</div>
<div>父组件传过来的参数：{{ parMsg }}</div>
<div>父组件调用子组件方法传入的参数:{{ sonMsg2 }}</div>
<el-button @click="parentFn">调用父组件方法</el-button>
</div>
</template>
<script>
export default {
name: "title",
};
</script>
<script setup>
import { ref } from "vue";
//接受父组件传过来的参数
const props = defineProps({
parMsg: {
type: String,
default: "",
},
});
//定义子组件的函数
const sonMsg2 = ref("");
const ParentOpSon = (parentMsg) => {
sonMsg2.value = parentMsg;
};
//抛出之后父组件才能调用该函数
defineExpose({
ParentOpSon,
});
//子组件调用父组件的方法
const emit=defineEmits()
const parentFn = () => {
emit("parentFn", "子组件调用父组件里面的函数了！");
};
</script>
<style lang="scss" scoped></style>
页面：
点击“调用父组件方法”就会出现红框内的字，证明父组件成功调用了子组件内的方法并成功传参