vue3父子路由畅通无阻，轻松掌握通信技巧！

前端

2023-09-12 03:46:34

父子路由通信：在 Vue3 中化繁为简

在 Vue2 的世界里，父子路由的交流就像父母与孩子之间的对话，轻而易举。然而，当我们踏入 Vue3 的领域，父子路由通信不再是通过简单的 ref 链传递。这难免让人困惑：在 Vue3 中，如何实现父子路由的顺畅交流？

剖析 Vue3 父子路由通信的微妙差异

1. 子路由不再是响应式对象

在 Vue2 中，子路由是一个响应式对象，我们可以轻松地通过 ref 链获取。但到了 Vue3，子路由不再是响应式对象，这意味着我们无法直接通过 ref 链获取其响应式数据和方法。

2. ref 链无法触达子路由

在 Vue2 中，我们可以利用 ref 链轻松获取子组件的实例。但在 Vue3 中，ref 链无法直接触达子路由，因为子路由不再是组件。

破解 Vue3 父子路由通信的秘诀

1. 运用 provide/inject

provide/inject 是 Vue3 中实现父子组件通信的利器。我们可以通过 provide 在父组件中提供数据或方法，然后在子组件中通过 inject 接收。

2. 借助 setup 函数

setup 函数是 Vue3 中引进的新特性，可以帮助我们访问组件的上下文对象，包括父组件提供的属性。我们可以通过 setup 函数获取父组件提供的数据或方法，并将其存储在响应式数据中。

实例演练：Vue3 父子路由通信实战

1. 在父组件中使用 provide 提供数据或方法

export default {
  setup() {
    const message = ref('Hello from parent!');
    provide('parentMessage', message);
  },
  template: `<div>
    <h1>{{ message }}</h1>
    <router-view />
  </div>`
};

2. 在子组件中使用 inject 接收数据或方法

export default {
  setup() {
    const message = inject('parentMessage');
    return {
      message
    };
  },
  template: `<div>
    <h1>{{ message }}</h1>
  </div>`
};

3. 通过 setup 函数获取父组件提供的数据或方法

export default {
  setup() {
    const parentMessage = setupContext.attrs.parentMessage;
    return {
      parentMessage
    };
  },
  template: `<div>
    <h1>{{ parentMessage }}</h1>
  </div>`
};