如何从其他组件重用相同的方法

Question

如何重构需要使用完全相同方法的两个组件？ 在那里定义父组件和相同的方法？

Vue.component("one", {
  method: {
    functionA:
  }
});

Vue.component("two", {
  method: {
    functionA
  }
});

Answer 1

你总是可以创建一个mixin ：

 var mixin = { methods: { consoleMessage() { console.log('hello from mixin!') } }, created() { this.consoleMessage() } } Vue.component('one', { mixins: [mixin], template: `<div>one</div>` }) Vue.component('two', { mixins: [mixin], template: `<div>two</div>` }) new Vue({ el: '#app' })

 <script src="https://unpkg.com/vue"></script> <div id="app"> <one></one> <two></two> </div>

Answer 2

没有异议可以在这里使用 mixin，但这也可以用普通的 javascript 来解决。

 function consoleMessage(){ console.log("hello from regular old javascript!") } Vue.component('one', { template: `<div>one</div>`, methods: { consoleMessage }, created() { this.consoleMessage() } }) Vue.component('two', { template: `<div>two</div>`, methods: { consoleMessage }, created() { this.consoleMessage() } }) new Vue({ el: '#app' })

 <script src="https://unpkg.com/vue"></script> <div id="app"> <one></one> <two></two> </div>

如果您使用现代模块，您可以定义要在模块中共享的功能并将其导入到两个组件中。

shared.js

export function consoleMessage(){
  console.log("hello from regular javascript!")
}

componentOne.js

import { consoleMessage } from "./shared"

export default {
  template: `<div>one</div>`,
  methods: { consoleMessage },
  created() { this.consoleMessage() }
}

组件二.js

import { consoleMessage } from "./shared"

export default {
  template: `<div>two</div>`,
  methods: { consoleMessage },
  created() { this.consoleMessage() }
}