从 Vue.js 中的另一个组件调用方法

Question

在这种情况下如何从另一个组件调用该方法？我想在组件 1 到组件 2 中单击按钮后从 API 加载额外的数据。

谢谢

这是我在单独文件中的两个组件：

压缩按钮.vue

<template>
    <div>
        <a href v-on:click="buttonClicked">Change Name</a>
    </div>
</template>

<script>
    export default {
        name: 'compbutton',
        methods: {
            buttonClicked: function () {
                //call changeName here
            }
        }
    }
</script>

compname.vue

<template>
    <div>{{name}}</div>
</template>

<script>
    export default {
        name: 'compname',
        data: function () {
            return {
                name: 'John'
            }
        },
        methods: {
            changeName: function () {
                this.name = 'Ben'
            }
        }
    }
</script>

Answer 1

您可以命名该组件，然后 $ref 到另一个组件的方法。

压缩按钮.vue

<template>
  <div>
    <a href v-on:click="buttonClicked">Change Name</a>
  </div>
</template>

<script>
export default {
  name: "compbutton",
  methods: {
    buttonClicked: function() {
      //call changeName here
      this.$root.$refs.compname_component.changeName();
    }
  }
};
</script>

compname.vue

<template>
  <div>{{name}}</div>
</template>

<script>
export default {
  name: "compname",
  data: function() {
    return {
      name: "John"
    };
  },
  methods: {
    changeName: function() {
      this.name = "Ben";
    }
  },
  created() {
    // set componenent name
    this.$root.$refs.compname_component = this;
  }
};
</script>

Answer 2

您可以使用服务作为中间人。通常，服务用于共享数据，但在 javascript 中，函数也可以像数据一样对待。

服务代码很简单，只需为函数添加一个存根即可changeName

更改名称.service.js

export default {
  changeName: function () {}
}

要将服务注入到组件中，您需要在项目中包含vue-injector 。

npm install --save vue-inject
or
yarn add vue-inject

并有服务登记册，

注射器-register.js

npm install --save vue-inject
or
yarn add vue-inject

然后在main.js（或主文件可能称为index.js）中有一个用于初始化注入器的部分。

import injector from 'vue-inject';

import ChangeNameService from '@/services/changeName.service'

injector.service('changeNameService', function () { 
  return ChangeNameService 
});

最后将服务添加到组件dependencies数组中，并使用该服务

compname.vue

import injector from 'vue-inject';
require('@/services/injector-register');
Vue.use(injector);

压缩按钮.vue

<script>
  export default {
    dependencies : ['changeNameService'],
    created() {
      // Set the service stub function to point to this one
      this.changeNameService.changeName = this.changeName;
    },
    ...

添加 a#到按钮 href 以停止页面重新加载

<script>
  export default {
    dependencies : ['changeNameService'],
    name: 'compbutton',
    methods: {
       buttonClicked: function () {
         this.changeNameService.changeName();
       }
    }
    ...

在CodeSandbox中查看全部内容