Question

我想在文件之间共享Vue中的方法。我尝试了不同的uggestins（在胶凝之后），但没有使其起作用。我让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>

为什么以及如何解决？

Answer 1

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

export { ipsecMixin }

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

import { ipsecMixin } from '../shared'

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

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

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

请注意，在默认的导入/导出中，您可以如何命名导入名称，但是在导出显式变量名称时，还必须引用相同的名称。

您可能想看看如何使用es6导入here

Answer 2

您需要将ipsecMix导出为*{ box-sizing: border-box; } .img{ width: 100%; height: 666.656px; } .mySlide{ max-width: 1000px; position: relative; margin: auto; } .btns{ text-align: center; } .btn{ cursor: pointer; display: inline-block; width: 20px; height: 20px; border-radius: 50%; background-color: #bbb; margin: 0 2px; } .active, .btn:hover{ background-color: pink; } .fade{ animation-name: fade; animation-duration: 1.5s; } @keyframes fade { 0%{ opacity: 0.4; } 100%{ opacity: 1; } }之类的文件。

外部文件

var slideIndex=1;
showSlide(slideIndex);
function currentSlide(n){
  showSlide(slideIndex=n);
}
function showSlide(n){
  var i;
  var slides=document.getElementsByClassName("mySlide");
  var dotz=document.getElementsByClassName("btn");
  for(i=0;i<slides.length;i++){
    slides[i].style.display="none";
  }
  for(i=0;i<dotz.length;i++){
    dotz[i].className=dotz[i].className.replace(" active","");
  }
  slides[slideIndex-1].style.display="block";
  dotz[slideIndex-1].className+=" active";
}

来自其他文件的Vue中的Method的混合

2 个答案: