假设我有一个包含子组件的主 Vue 实例。有没有办法完全从 Vue 实例外部调用属于这些组件之一的方法?
这是一个例子:
var vm = new Vue({ el: '#app', components: { 'my-component': { template: '#my-template', data: function() { return { count: 1, }; }, 方法: { increaseCount: function() { this.count++; } } }, } }); $('#external-button').click(function() { vm['my-component'].increaseCount(); // 这不起作用 });
A counter: {{ count }}
因此,当我单击内部按钮时,increaseCount()
方法会绑定到其单击事件,因此会被调用。无法将事件绑定到外部按钮,我正在使用 jQuery 侦听其单击事件,因此我需要一些其他方法来调用 increaseCount
。
编辑
似乎这有效:
vm.$children[0].increaseCount();
但是,这不是一个好的解决方案,因为我通过子数组中的索引引用组件,并且对于许多组件,这不太可能保持不变并且代码的可读性较差。
最后我选择了使用 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>
参见这个小提琴的例子:https://jsfiddle.net/xmqgnbu3/1/
(使用 Vue 1 的旧示例:https://jsfiddle.net/6v7y6msr/)
为 Vue3 编辑 - 组合 API
子组件必须 return
您要在父组件中使用的 setup
中的函数,否则该函数对父组件不可用。
注意:
您可以为子组件设置 ref,然后在父组件中可以通过 $refs 调用:
将 ref 添加到子组件:
<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, }; }, 方法: { increaseCount: function() { this.count++; } } }, } });
一个计数器:{{ count }}
this.$refs.childref
从父组件访问 ref,例如,使用它来制作通用警报组件
对于 Vue2 这适用:
var bus = new Vue()
// 在组件 A 的方法中
bus.$emit('id-selected', 1)
// 在组件 B 的 created 钩子中
bus.$on('id-selected', function (id) {
// ...
})
有关 Vue 文档,请参阅 here。 here 更详细地说明了如何准确设置此事件总线。
如果您想了解有关何时使用属性、事件和/或集中状态管理的更多信息,请参阅 this article。
请参阅以下 Thomas 关于 Vue 3 的评论。
bus
变量,您可以更进一步,使用 props 将总线注入到您的组件中。我对 vue 比较陌生,所以我不能向你保证这是惯用的。
可以使用 Vue 事件系统
vm.$broadcast('event-name', args)
和
vm.$on('event-name', function())
这是小提琴:http://jsfiddle.net/hfalucas/wc1gg5v4/59/
接受答案的稍微不同(更简单)的版本:
在父实例上注册一个组件:
export default {
components: { 'my-component': myComponent }
}
使用引用在 template/html 中渲染组件:
<my-component ref="foo"></my-component>
访问组件方法:
<script>
this.$refs.foo.doSomething();
</script>
假设您在子组件中有一个 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()
注意:不建议像这样访问子组件和父组件。
相反,作为最佳实践,使用 Props & Events 进行父子通信。
如果您希望组件之间进行通信,请务必使用 vuex 或 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');
}
}
这是一个简单的
this.$children[indexOfComponent].childsMethodName();
使用 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
我不确定它是否正确,但这个方法对我有用。首先导入包含您要在组件中调用的方法的组件
import myComponent from './MyComponent'
然后调用 MyCompenent 的任何方法
myComponent.methods.doSomething()
doSomething
正在使用数据中的任何东西,则此方法无用。
在这样的组件中声明您的函数:
export default {
mounted () {
this.$root.$on('component1', () => {
// do your logic here :D
});
}
};
并从这样的任何页面调用它:
this.$root.$emit("component1");
有时您希望将这些内容包含在您的组件中。根据 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();
});
}
如果您使用带有 <script setup>
糖的 Vue 3,请注意组件的内部绑定是关闭的(从组件外部不可见),您必须使用 defineExpose
(请参阅 docs)使它们从外部可见。像这样的东西:
<script setup lang="ts">
const method1 = () => { ... };
const method2 = () => { ... };
defineExpose({
method1,
method2,
});
</script>
我使用了一个非常简单的解决方案。我使用 Vanilla JS 在我选择的 Vue 组件中包含了一个调用该方法的 HTML 元素,然后触发点击!
在 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();
不定期副业成功案例分享
vm
,因为它限定了模块的范围。您可以在main.js
中执行类似window.app = vm
的操作。来源:forum.vuejs.org/t/how-to-access-vue-from-chrome-console/3606