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

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

componentTwo.js

import { consoleMessage } from "./shared"

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

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

How to reuse same method from other component

javascript

vue.js

vue-component