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

lap*_*ira 2 vue.js vue-component

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

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

Vue.component("two", {
  method: {
    functionA
  }
});
Run Code Online (Sandbox Code Playgroud)

Vuc*_*cko 6

你总是可以创建一个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'
})
Run Code Online (Sandbox Code Playgroud)
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <one></one>
  <two></two>
</div>
Run Code Online (Sandbox Code Playgroud)