时间戳

首页 > 解决方案 > 从其他文件混合 Vue 中的方法

javascript - 从其他文件混合 Vue 中的方法

问题描述

我想在文件之间共享 Vue 中的一个方法。我尝试了不同的建议（在谷歌之后），但没有让它工作。我让 mixin 在同一个文件中工作 - 但不是从其他文件导入。

这是有效的（就在脚本标签下的导入部分之后）：

// import ipsecMixin from '../shared'
   var ipsecMixin = {
     methods: {
       IpsecKodeRemote: function(
         [kode here...]
          ....
    export default {
       name: 'MurSerit',
       props: {
         ....
       },
       mixins: [ipsecMixin],
       computed: {

但随后我尝试将代码移动到外部文件（并如您在上面示例中注释掉的部分中看到的那样导入）：

var ipsecMixin = {
  methods: {
   IpsecKodeRemote: function(
     [kode here...]
export { ipsecMixin }

我收到组件错误。

vue.runtime.esm.js?2b0e:587 [Vue warn]: Error in render: "TypeError: Cannot read property 'components' of undefined"

found in

---> <Modl2l> at src/components/Modl2l.vue
   <Form> at src/components/Form.vue
     <HelloWorld> at src/components/HelloWorld.vue
       <Home> at src/views/Home.vue
         <App> at src/App.vue
           <Root>

为什么，以及如何解决？

标签： javascriptvue.jsvue-component

解决方案

如果您要像这样导出显式变量：

export { ipsecMixin }

您还需要将其作为变量导入：

import { ipsecMixin } from '../shared'

您还可以像这样使用默认导入/导出：

// in shared.js
export default ipsecMixin = {
  methods: {
    IpsecKodeRemote: function(){},
  }
}

// in your component file
import myIpSecMixin from '../shared'

请注意，在默认的导入/导出中，您可以根据需要为导入命名，但是在导出显式变量名称时，您还必须将其引用为相同的名称。

您可能想看看如何在此处使用 es6 导入

推荐阅读