Question

如何在此方案中从其他组件调用该方法？一旦在组件1中单击按钮到组件2，我想从API加载额外的数据。

由于

以下是单独文件中的两个组件：

compbutton.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引用。

compbutton.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

的存根

<强> changeName.service.js

export default {
  changeName: function () {}
}

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

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

并拥有服务注册，

<强>喷射器register.js

import injector from 'vue-inject';

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

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

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

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

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

<强> compname.vue

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

<强> compbutton.vue

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

在按钮href中添加#以停止页面重新加载

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

在CodeSandbox

中查看整个内容

Answer 3

备选答案：您可以将孩子调用的函数作为 prop 从父组件传递。使用您的示例：

compbutton.vue

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

<script>
    export default {
        name: 'compbutton',
        props: {
            clickHandler: {
                type: Function,
                default() {
                    return function () {};
                }
            }
        },
        methods: {
            buttonClicked: function () {
                this.clickHandler(); // invoke func passed via prop
            }
        }
    }
</script>

compname.vue

<template>
    <div>{{name}}</div>
    <compbutton :click-handler="changeName"></compbutton>
</template>

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

请注意，在您的示例中，它不会显示在您希望＆＃39; compbutton＆＃39;的位置。要渲染的组件，所以在compname.vue的模板中，也添加了它们。

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

3 个答案: