假设我有一个主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>
因此，当我单击内部按钮时，increecount()方法被绑定到它的click事件，因此它被调用。没有办法将事件绑定到外部按钮，我正在用jQuery监听其单击事件，所以我需要其他方法来调用增加量计数。
EDIT
这似乎是可行的:
vm.$children[0].increaseCount();
然而，这不是一个好的解决方案，因为我是通过它在子数组中的索引来引用组件的，对于许多组件来说，这不太可能保持不变，代码的可读性也较差。
最后我选择使用Vue的ref指令。这允许从父组件中引用组件进行直接访问。
E.g.
在父实例上注册一个组件:
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>
请看这个小提琴的例子:https://jsfiddle.net/0zefx8o6/
(使用Vue 1的旧示例:https://jsfiddle.net/6v7y6msr/)
编辑Vue3 -组合API
子组件必须在设置中返回你想在父组件中使用的函数，否则该函数对父组件不可用。
注意:< script setup> doc不受影响，因为它默认为模板提供了所有的函数和变量。
假设你在子组件中有一个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
}
}
}
如果你想从子组件执行父组件方法:
parent.name_of_method美元。()
注意:不建议像这样访问子组件和父组件。
相反，作为最佳实践，使用道具和事件进行亲子交流。
如果你想要组件之间的通信，一定要使用vuex或事件总线
请阅读这篇非常有用的文章
你可以为子组件设置引用，然后在父组件中调用$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>
有时您希望将这些内容包含在组件中。根据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();
});
}
