如何在 VueJs 中调用组件而不渲染答案

【问题标题】：how to call a component without rendering in VueJs如何在 VueJs 中调用组件而不渲染
【发布时间】：2021-04-12 20:35:08
【问题描述】：

我正在开发一个小型 Vuejs 项目，我有一个名为 navbar.vue 的导航栏组件包含路由器链接，

首页
关于
联系方式

文件中的每个组件，但联系人，我想调用我在联系人组件中的方法而不渲染模板

我想在不渲染的情况下调用联系方法

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

您可以将该方法分解到一个通用文件中，并在需要的地方导入它：

// utils.js
export function sayHi() {
  console.log('hello world')
}

// Contact.vue
import { sayHi } from './utils'

export default {
  methods: {
    foo() {
      sayHi()
    }
  }
}

// App.vue
import { sayHi } from './utils'

export default {
  methods: {
    bar() {
      sayHi()
    }
  }
}

【讨论】：

【解决方案2】：

在我看来，您想要执行与外部联系人组件中相同的逻辑。

您必须在联系组件中推断方法的逻辑。假设你的组件有一个方法sendMessage()，你可以创建文件并导出函数，在联系人组件中导入函数，在其他方法中你想重用它。

如果逻辑有一些相关的东西（例如需要更改的数据的观察者），则可以使用一种更“vue”的方式来执行此操作，它使用 vue-3 或 vue-2 中可用的 vue 可组合的 vue-组合 API 插件。

【讨论】：

【解决方案3】：

您不必将逻辑移动到单独的文件中。

添加新的数据属性，例如doRender
beforeMount 内部将 doRender 设置为 false
在模板内部，将其所有内容包装在一个 div 中并使用v-if="doRender"

【讨论】：