从组件外部调用 Vue.js 组件方法

Call a Vue.js component method from outside the component

假设我有一个包含子组件的主 Vue 实例。有没有办法完全从 Vue 实例外部调用属于这些组件之一的方法?

这是一个例子:

var vm = new Vue({
  el: '#app',
  components: {
    'my-component': { 
      template: '#my-template',
      data: function() {
        return {
          count: 1,
        };
      },
      methods: {
        increaseCount: function() {
          this.count++;
        }
      }
    },
  }
});

$('#external-button').click(function()
{
  vm['my-component'].increaseCount(); // This doesn't work
});
<script src="http://vuejs.org/js/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app">
  
  <my-component></my-component>
  <br>
  <button id="external-button">External Button</button>
</div>
  
<template id="my-template">
  <div style="border: 1px solid; padding: 5px;">
  <p>A counter: {{ count }}</p>
  <button @click="increaseCount">Internal Button</button>
    </div>
</template>

所以当我点击内部按钮时,increaseCount() 方法被绑定到它的点击事件,所以它被调用。无法将事件绑定到外部按钮,我正在使用 jQuery 监听其点击事件,因此我需要一些其他方式来调用 increaseCount.

编辑

这似乎有效:

vm.$children[0].increaseCount();

但是,这不是一个好的解决方案,因为我通过其在子数组中的索引来引用组件,并且对于许多组件,这不太可能保持不变并且代码可读性较差。

可以使用Vue事件系统

vm.$broadcast('event-name', args)

 vm.$on('event-name', function())

这是 fiddle: http://jsfiddle.net/hfalucas/wc1gg5v4/59/

最后我选择了使用Vue's ref directive。这允许从父级引用组件以进行直接访问。

例如

在我的父实例上注册了一个组件:

var vm = new Vue({
    el: '#app',
    components: { 'my-component': myComponent }
});

使用引用渲染 template/html 中的组件:

<my-component ref="foo"></my-component>

现在,我可以在其他地方从外部访问该组件

<script>
vm.$refs.foo.doSomething(); //assuming my component has a doSomething() method
</script>

查看此 fiddle 示例:https://jsfiddle.net/xmqgnbu3/1/

(使用 Vue 1 的旧示例:https://jsfiddle.net/6v7y6msr/

为 Vue3 编辑 - 组合 API

子组件必须 return 您要在父组件中使用的 setup 中的功能,否则该功能对父组件不可用。

Note: <sript setup> doc is not affacted, because it provides all the functions and variables to the template by default.

对于 Vue2 这适用:

var bus = new Vue()

//组件A的方法中

bus.$emit('id-selected', 1)

// 在组件B创建的钩子中

bus.$on('id-selected', function (id) {

  // ...
})

有关 Vue 文档,请参阅 herehere 更详细地介绍了如何准确设置此事件总线。

如果您想了解有关何时使用属性、事件和/或集中式状态管理的更多信息,请参阅 this article

请参阅下面 Thomas 关于 Vue 3 的评论。

这是一个简单的

this.$children[indexOfComponent].childsMethodName();

假设您在子组件中有一个 child_method()

export default {
    methods: {
        child_method () {
            console.log('I got clicked')
        }
    }
}

现在你想从父组件执行 child_method:

<template>
    <div>
        <button @click="exec">Execute child component</button>
        <child-cmp ref="child"></child_cmp> <!-- note the ref="child" here -->
    </div>
</template>

export default {
    methods: {
        exec () { //accessing the child component instance through $refs
            this.$refs.child.child_method() //execute the method belongs to the child component
        }
    }
}

如果要从子组件执行父组件方法:

this.$parent.name_of_method()

注意:不建议这样访问子组件和父组件。

最好使用道具和活动进行亲子交流。

如果你想要组件之间的通信一定要使用vuex or event bus

请阅读这篇文章很有帮助article


这是从其他组件访问组件方法的简单方法

// This is external shared (reusable) component, so you can call its methods from other components

export default {
   name: 'SharedBase',
   methods: {
      fetchLocalData: function(module, page){
          // .....fetches some data
          return { jsonData }
      }
   }
}

// This is your component where you can call SharedBased component's method(s)
import SharedBase from '[your path to component]';
var sections = [];

export default {
   name: 'History',
   created: function(){
       this.sections = SharedBase.methods['fetchLocalData']('intro', 'history');
   }
}

我使用了一个非常简单的解决方案。我在我 select 的 Vue 组件中包含了一个 HTML 元素,它调用该方法,使用 Vanilla JS,我触发了点击!

在 Vue 组件中,我包含了如下内容:

<span data-id="btnReload" @click="fetchTaskList()"><i class="fa fa-refresh"></i></span>

我使用 Vanilla JS:

const btnReload = document.querySelector('[data-id="btnReload"]');
btnReload.click();                

您可以为子组件设置 ref 然后在父组件中可以通过 $refs 调用:

向子组件添加引用:

<my-component ref="childref"></my-component>

向父级添加点击事件:

<button id="external-button" @click="$refs.childref.increaseCount()">External Button</button>

var vm = new Vue({
  el: '#app',
  components: {
    'my-component': { 
      template: '#my-template',
      data: function() {
        return {
          count: 1,
        };
      },
      methods: {
        increaseCount: function() {
          this.count++;
        }
      }
    },
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  
  <my-component ref="childref"></my-component>
  <button id="external-button" @click="$refs.childref.increaseCount()">External Button</button>
</div>
  
<template id="my-template">
  <div style="border: 1px solid; padding: 2px;" ref="childref">
    <p>A counter: {{ count }}</p>
    <button @click="increaseCount">Internal Button</button>
  </div>
</template>

已接受答案的稍微不同(更简单)的版本:

在父实例上注册了一个组件:

export default {
    components: { 'my-component': myComponent }
}

使用引用渲染 template/html 中的组件:

<my-component ref="foo"></my-component>

访问组件方法:

<script>
    this.$refs.foo.doSomething();
</script>

我不确定这是不是正确的方法,但这对我有用。
首先导入包含要在组件中调用的方法的组件

import myComponent from './MyComponent'

然后调用MyCompenent的任意方法

myComponent.methods.doSomething()

有时您希望将这些内容包含在您的组件中。根据 DOM 状态(实例化 Vue 组件时,您正在监听的元素必须存在于 DOM 中),您可以从 Vue 组件内监听组件外部元素的事件。假设在您的组件之外有一个元素,当用户单击它时,您希望您的组件做出响应。

在 html 你有:

<a href="#" id="outsideLink">Launch the component</a>
...
<my-component></my-component>

在你的 Vue 组件中:

    methods() {
      doSomething() {
        // do something
      }
    },
    created() {
       document.getElementById('outsideLink').addEventListener('click', evt => 
       {
          this.doSomething();
       });
    }
    

使用 Vue 3:

const app = createApp({})

// register an options object
app.component('my-component', {
  /* ... */
})

....

// retrieve a registered component
const MyComponent = app.component('my-component')

MyComponent.methods.greet();

https://v3.vuejs.org/api/application-api.html#component

像这样在组件中声明您的函数:

export default {
  mounted () {
    this.$root.$on('component1', () => {
      // do your logic here :D
    });
  }
};

并像这样从任何页面调用它:

this.$root.$emit("component1");

如果您使用带有 <script setup> sugar 的 Vue 3,请注意组件的内部绑定是关闭的(从组件外部不可见)并且您必须使用 defineExpose(请参阅 docs) 使它们从外面可见。像这样:

<script setup lang="ts">
const method1 = () => { ... };
const method2 = () => { ... };

defineExpose({
  method1,
  method2,
});
</script>