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

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>