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

Question

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

• 家
• 关于
• 接触

除了联系人之外的文件中的每个组件，我想调用我在联系人组件中拥有的方法而不呈现模板

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

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()，您可以创建一个文件并导出 function，在联系组件中导入 function，在其他方法中您要重用它。

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

Answer 3

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

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