1. 父传子 defineProps

父组件传值给子组件主要是由父组件通过v-bind绑定数值，而后传给子组件；子组件则通过defineProps 接收使用。

  • 父组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div class="fu">
    <p>我是父组件</p>
    <son :toSomMeg="toSomMeg"></son>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import son from "./son.vue";

const toSomMeg = ref("给子组件的消息");
</script>

<style>
.fu {
  width: 100%;
  background-color: aquamarine;
  border: 2px solid #333;
}
</style>
  • 子组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <div class="zi">
    <p>我是子组件</p>
    <p>
      来自父组件的信息： <span style="color: red">{{ toSomMeg }}</span>
    </p>
  </div>
</template>
<script setup lang="ts">
interface Props {
  toSomMeg?: string;
}
// 接受父组件的值
const props = defineProps<Props>();
console.log(props.toSomMeg);
</script>
<style>
.zi {
  width: 100%;
  background-color: skyblue;
  border: 1px solid #333;
}
</style>

父组件在调用子组件时使用 v-bind 绑定参数，并传给子组件；
子组件使用 defineProps 接收父组件传递来的参数，然后就能正常使用该参数了。

2. 子传父 defineEmits

子组件传值给父组件主要是通过defineEmits注册一个自定义事件，而后触发调用自定义事件，并传递参数给父组件。
在父组件中调用子组件时，通过 v-on 绑定一个函数，通过该函数传过来的值。

  • 父组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
  <div class="fu">
    <p>我是父组件</p>
    <son :toSomMeg="toSomMeg" @toFaMsg="getSumMsg"></son>
    <p>
      父组件收到子组件的信息：<span style="color: red">{{ sunMeg }}</span>
    </p>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import son from "./son.vue";

const sunMeg = ref("");
function getSumMsg(val: string) {
    sunMeg.value = val;
}
</script>

<style>
.fu {
  width: 100%;
  background-color: aquamarine;
  border: 2px solid #333;
}
</style>
  • 子组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
  <div class="zi">
    <p>我是子组件</p>
    <p>
      <el-button type="primary" @click="onClick">点击传给父组件</el-button>
    </p>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";

const val = ref<string>("子组件给父组件的信息");
// 使用 defineEmits 注册一个自定义事件
const emit = defineEmits(["toFaMsg"]);
function onClick() {
    emit("toFaMsg", val);
}
</script>

<style>
.zi {
  width: 100%;
  background-color: skyblue;
  border: 1px solid #333;
}
</style>

3. 子组件暴露属性给父组件 defineExpose

当父组件想直接调用子组件的方法时候，子组件可以使用defineExpose暴露自身的属性或者方法，父组件中使用ref直接调用子组件暴露的属性或方法。

  • 子组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <div class="zi">
    <p>我是子组件</p>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";

function Prints(): void {
    alert("老铁 666");
}

// 暴露方法
defineExpose({ Prints });
</script>

<style>
.zi {
  width: 100%;
  background-color: skyblue;
  border: 1px solid #333;
}
</style>
  • 父组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <div class="fu">
    <p>我是父组件</p>
    <son ref="sonMethod"></son>
    <el-button type="primary" @click="getSonMethod">使用子组件的方法</el-button>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import son from "./son.vue";

// 获取子组件
const sonMethod = ref();
function getSonMethod() {
    sonMethod.value.Prints();
}
</script>

<style>
.fu {
  width: 100%;
  background-color: aquamarine;
  border: 2px solid #333;
}
</style>