Question

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

首页
关于
联系方式

文件中的每个组件除了 Contact 之外，我想调用我在 contact 组件中拥有的方法而不渲染模板

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

Answer 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()
    }
  }
}

Answer 2

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

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

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

Answer 3

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

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

如何在 VueJs 中不渲染的情况下调用组件

3 个答案: