Vue3 组件间相互访问（单文件 + <script setup> + 组合式 API 举例）

父组件传参数到子组件 - props

在 <script setup> 中用 defineProps() 声明组件的属性，在父组件模板中引用子组件时，就可以给通过属性给子组件传参数（可以是值、变量、函数、对象等）。

defineProps 是编译器宏，Vue3 编译器宏不需要导入，并且只能在 <script setup> 中使用。

ex: 子组件声明、调用属性

<!-- HelloWorld.vue 子组件-->
<script setup>
// 声明属性
defineProps([{
    msg: String
}])
</script>

<template>
  <div>
    {{ msg }}
  </div>
</template>

ex: 父组件使用属性

<!-- Demo.vue 父组件 -->
<script setup>
import HelloWorld from './HelloWorld.vue'
</script>

<template>
  <HelloWorld msg="Welcome"/>
</template>

父组件传递事件到子组件

在 <script setup> 中用编译器宏 defineEmits() 声明组件提供的事件，并且触发事件后，在父组件引用子组件时就可以给子组件传递事件。

模板中用可直接用 $emit 变量触发事件，不需要用 defineEmits() 声明，但是实现触发事件的同时还需要做其他事情时，就要用 defineEmits()。

ex: 子组件声明 & 触发事件

<!-- HelloWorld.vue 子组件-->
<script setup>
// 声明事件
const emits = defineEmits(['my-event-a', 'myEventB'])

const onEventA = () => {
    // 触发事件
    emits('my-event-a');
    // more code
}
const onEventB = () => {
    // 触发事件，并给事件传参
    emits('my-event-b', '参数1', '参数2', '参数...');
    // more code
}
</script>

<template>
  <div>
    <button @click="$emit('my-event-1')">$emit 触发事件</button>
    <button @click="$emit('my-event-2', '参数1', '参数2')">$emit 触发事件并传参</button>
    <button @click="onEventA">按钮a</button>
    <button @click="onEventB">按钮b</button>
  </div>
</template>

ex: 父组件传递事件到子组件

<!-- Demo.vue 父组件 -->
<script setup>
import HelloWorld from './HelloWorld.vue';

const handle1 = () => {
    console.log('hi')
}
const handle2 = (arg1, arg2) => {
    console.log(arguments)
}
</script>

<template>
  <HelloWorld msg="Welcome" @my-event-1="handle1" @my-event-2="handle2" @my-event-a="handle1" @my-event-b="handle2" />
</template>

父组件通过插槽给子组件分配内容

使用 <slot /> 作为一个占位符，父组件传递进来的内容就会渲染在这里。

<!-- AlertBox.vue 子组件 -->
<template>
  <div class="alert-box">
    <strong>This is an Error for Demo Purposes</strong>
    <slot />
  </div>
</template>

<!-- Demo.vue 父组件 -->
<script setup>
import AlertBox from './AlertBox.vue'
</script>

<template>
  <AlertBox>
    Something bad happened.
  </AlertBox>
</template>

父组件访问子组件实例

父组件通过模板引用或者 $parent 链获取到的组件的公开实例，默认不会暴露任何在 <script setup> 中声明的绑定，我们可以通过 defineExpose 编译器宏来显式指定要暴露哪些绑定。

ex: 子组件显式暴漏绑定

<!-- Foo.vue -->
<script setup>
import { ref } from 'vue'

const a = 11
const b = ref(2)
const c = () => {
    console.log('im foo')
}

defineExpose({ a, b, c })
</script>

当父组件通过模板引用的方式获取到当前组件的实例，获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)

ex: 父组件通过模板引用访问子组件暴漏的绑定

<!-- Demo.vue -->
<script setup>
import { ref } from 'vue';
import Foo from './Foo.vue';

 // setup 中 用 ref(null) 声明跟变量名同名的模板引用
const fooRef = ref(); // <Foo ref="fooRef" />

const abc = () => {
    // 通过模板引用获取实例暴变量值
    // 注意：需要等到 mounted 后访问模板实例才有效
    console.log(fooRef.value.a) // 11
    fooRef.value.c()
}
</script>

<template>
    <Foo ref="fooRef" />
    <!-- 在模板中可以直接用 $refs 访问模板引用，不需要声明 -->
    <p>{{ $refs['fooRef'].a }}</p>
</template>

子组件访问父组件

方式1 使用 defineExpose

父组件用 defineExpose() 显式暴露绑定后，在子组件的 <script setup> 中用 getCurrentInstance().parent.exposed 访问，在子组件的模板中用 $parent 访问。

推荐在子件的模板中调用父组件时使用该方式，在子组件的 <script setup> 中推荐用依赖注入更方便。

ex: 父组件引用子组件

<!-- Demo.vue 父组件 -->
<script setup>
import { ref } from 'vue';
import Foo from './Foo.vue';

const a = 111
const bar = () => {
    console.log('im done.')
}
defineExpose({ a, bar }) // 显式暴露 bar 绑定
</script>

<template>
    <!-- 父组件引用子组件 -->
    <Foo ref="fooRef" />
</template>

ex: 子组件访问父组件显式暴露的绑定

<!-- Foo.vue 子组件 -->
<script setup>
import { getCurrentInstance } from 'vue';
// 访问父组件 defineExpose() 暴漏的绑定
const parentExposed = getCurrentInstance().parent.exposed;
console.log(parentExposed.a)
parentExposed.bar()
</script>

<template>
    <!-- 模板中直接用 $parent 就可以调用父组件暴漏的绑定 -->
    {{ $parent.a }}
</template>

方式2 使用 Vue3 的依赖注入

用 provide() 在父组件提供依赖，用 inject() 在子组件 <script setup> 中注入。

在 setup 中访问父组件，使用依赖注入更便捷。
inject() 必须在组件的 setup() 阶段同步调用。

ex: 父组件提供依赖

<!-- Demo.vue 父组件 -->
<template>
    <Foo />    
</template>

<script setup>
import { provide } from 'vue'
import Foo from './Foo.vue';

provide('bar', () => { 
    console.log('Hello')
})
</script>

ex: 子组件注入依赖

<!-- Foo.vue 子组件 -->
<script setup>
import { inject } from 'vue';
const abc = inject('bar');
abc()
</script>

兄弟组件互相访问

兄弟组件加上 ref 属性后，通过父组件的 refs 就可以调用到兄弟组件用 defineExpose() 暴漏的绑定，

ex: 父组件显式暴漏绑定

<!-- Demo.vue 父组件 -->
<template>
    <Foo ref="fooRef" />    
</template>

<script setup>
import Foo from './Foo.vue';

const a = 1;
const bar = () => {
    console.log('im bar')
}

defineExpose({ a, bar })
</script>

ex: 子组件访问父组件暴漏的绑定

<!-- Foo.vue 子组件 -->
<script setup>
import { getCurrentInstance } from 'vue';
const parent = getCurrentInstance().parent; // 获取父组件的模板引用
parent.refs.fooRef.a // 调用暴漏的变量
parent.refs.fooRef.bar() // 调用暴漏的方法
</script>

<template>
    <!-- 在模板中用预置的 $parent 访问覆膜板暴漏的绑定 -->
    {{ $parent.$refs.fooRef.a }}
    <button @click="$parent.$refs.fooRef.bar()">点我</button>
</template>

使用状态管理

比较复杂的应用，强烈推荐使用该方法。
我们可以用 响应式 API 做简单状态管理。

原理

根据 js 变量的作用域的特性，在一个单页面应用（SPA）中，如果有一个文件定义了全局变量，SPA 中任意一个文件 import 该文件，都会共享该变量。代码如下：

// test.js
let a1 = 0;
export function pr() {
    ++a1;
    console.log(a1)
}

如果你有一部分状态需要在多个组件实例间共享，你可以使用 reactive() 或 ref() 来创建一个响应式对象，并将它导入到多个组件中：

// todoListStore.js
import { ref } from 'vue';
export const todoList = ref([]);
export function loadData() (list) {
    // 从服务器端加载数据
    fetch('/todo').then(function (res) {
        todoList.value = res.json().items;
    })
}

父组件或子组件都可以引入 todoListStore.js，共同维护其中的响应式变量 todoList 的状态。

更复杂的状态管理，推荐使用 Pinia。

使用 window 变量

在组件中把变量赋值给 windows 变量，父组件、兄弟组件、子组件都能访问到，子组件 setup() 之外也能访问到。此方法违背了 Vue3 的设计思想，容易引起混乱，慎用。