总览

1. props/emit 父子组件通信
2. provide/inject 祖孙组件通信
3. useAttrs 传递父作用域里除 class 和 style 除外的非 props 属性集合
4. vuex/pinia 通用
5. v-model
6. ref/expose

前面4中比较常见，这里就不啰嗦了，主要记录一下后两种的用法。

v-model

v-model不仅可以用作DOM节点的双向绑定，也可以用于组件之间。

假设A组件是父组件，B组件是子组件

// A.vue
<script setup>
import { ref } from "vue";
import B from "./B.vue";

const count = ref(1);
</script>

<template>
	<span>{{ count }}</span>
	<B v-model="count" />
</template>

当v-model用于组件之间时，可以看做是

<B :modelValue="count" @update:model-value="count = $event" />

子组件B.vue

// B.vue
<script setup>
const emit = defineEmits(["update:modelValue"]);
const props = defineProps(["modelValue"]);

console.log(props.modelValue);  // 获取prop

// 更新modelValue
function onClick() {
	emit("update:modelValue", props.modelValue + 1);
}
</script>

v-model相当于v-model:modelValue ,也可以传递其他参数，例如v-model:count ,如果这样子组件的modelValue也要改为count。

// A.vue
<B v-model:count="count" />
// B.vue
<script setup>
const emit = defineEmits(["update:count"]);
const props = defineProps(["count"]);

console.log(props.count);

function onClick() {
	emit("update:count", props.count + 1);
}
</script>

ref/expose