前言：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>

页面：

点击“调用父组件方法”就会出现红框内的字，证明父组件成功调用了子组件内的方法并成功传参