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

假设我有一个主Vue实例，它有子组件。是否有一种方法可以完全从Vue实例外部调用属于这些组件之一的方法?

这里有一个例子:

因此，当我单击内部按钮时，increecount()方法被绑定到它的click事件，因此它被调用。没有办法将事件绑定到外部按钮，我正在用jQuery监听其单击事件，所以我需要其他方法来调用增加量计数。

EDIT

这似乎是可行的:

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

然而，这不是一个好的解决方案，因为我是通过它在子数组中的索引来引用组件的，对于许多组件来说，这不太可能保持不变，代码的可读性也较差。

当前回答

您可以使用Vue事件系统

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

and

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

这是小提琴: http://jsfiddle.net/hfalucas/wc1gg5v4/59/

2015-11-12 23:44:45

其他回答

如果你使用Vue 3和<script setup> sugar，请注意，组件的内部绑定是关闭的(从组件外部不可见)，你必须使用defineExpose(参见docs)使它们从外部可见。就像这样:

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

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

自

默认情况下关闭正在使用的组件

2022-05-23 12:50:11

您可以使用Vue事件系统

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

and

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

这是小提琴: http://jsfiddle.net/hfalucas/wc1gg5v4/59/

2015-11-12 23:44:45

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

// 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');
   }
}

2018-06-28 17:31:18

使用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

2020-10-21 09:57:17

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

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

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

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

2021-12-06 10:02:17

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

推荐文章

最新文章

标签