Vue3父子组件数据传递

getCurrentInstance方法

Vue2中，可以通过this来获取当前组件实例；

Vue3中，在setup中无法通过this获取组件实例，console.log(this)打印出来的值是undefined。

在Vue3中，getCurrentInstance()可以用来获取当前组件实例。

let { proxy } = getCurrentInstance();
1

在setup中分别打印下面3个值，结果如下：

console.log(getCurrentInstance,typeof(getCurrentInstance));
console.log(getCurrentInstance(),typeof(getCurrentInstance()));
console.log(proxy,typeof(proxy));
1
2
3

可以看到，getCurrentInstance是一个function方法，getCurrentInstance()是一个对象，proxy也是一个对象。proxy是getCurrentInstance()对象中的一个属性，通过对象的解构赋值方式拿到proxy。

getCurrentInstance只能在setup或生命周期钩子中使用

用于线上环境使用方法：

方法1：

const instance = getCurrentInstance()
console.log(instance.appContext.config.globalProperties)
1
2

方法2：

const { proxy } = getCurrentInstance()  
1

$emit使用方法

许多Vue模式涉及使用props将数据从父组件传递到子组件。但如果我们需要一个子组件将数据传给它的父组件呢？

使用 emit，我们可以触发事件并将数据传递到组件的层次结构中。这对下面几种情况很有用，如：

• 从 input 中发出数据
• 从 modal 本身内部关闭 modal
• 父组件响应子组件

Vue Emit是如何工作的？

当我们 emit 一个事件时，我们用一个或多个参数调用一个方法：

• eventName: string - 事件的名称
• values: any - 通过事件传递的参数

下面是一个内联 emit的例子，。emit一个名为add的事件，并将Math.random()的值作为参数传递出去。

然后，在父组件使用v-on或@指令可以监听我们的自定义添加事件并接收该参数值。

Child.vue

1
2
3
4
5

在Parent.vue中监听：

1
2
3
4
5
6
7
8
9
10

每次我们点击按钮，Child.vue 都会 emit 一个 add 事件，并带有一个0到1之间的随机值。 然后，Parent.vue 捕捉到这个事件，并将这个值添加到计数中。

可以传递任意多的参数，监听器也会收到所有的参数：

• Child - $emit(‘add’, Math.random(), 44, 50)
• Parent - @add=“(i, j, k) => count += i + j + k”

现在，我们知道如何在我们的模板中 emit 内联事件，但在更复杂的例子中，如果我们从SFC的script 中 emit 一个事件会更好。特别是当我们想在 emit 事件之前执行一些逻辑时，这很有用。

在Vue 3中，我们有2种不同的方法来做到这一点:

• 选项API - this.$emit
• 带有setup()的组合API - context.emit
• 带有