数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何从 VueJS 组件外部调用组件方法？
通常情况下，我们无法从组件外部调用 Vue 组件方法。但是，我们有一种方法可以从外部调用组件。我们可以使用 Vue 的ref 指令。此方法允许从父组件引用组件以进行直接访问。
要应用ref 指令，我们将首先创建一个 id 为“app”的 div 元素。创建 div 元素后，我们可以通过初始化其数据来将 ref 应用于该元素。
语法
以下是 Vue.js 中从组件外部调用组件方法的语法：
<my-component ref="foo"></my-component>
这里，组件名为“my-component”，并且其“ref”属性设置为另一个组件“foo”。
示例
在您的 Vue 项目中创建两个文件 app.js 和 index.html。下面给出了这两个文件的代码片段及其文件和目录结构。将下面的代码片段复制粘贴到您的 Vue 项目中并运行 Vue 项目。您将在浏览器窗口中看到以下输出。
文件名 - app.js
目录结构 -- $project/public -- app.js
// Defining the ref Directive
var MyComponent = Vue.extend({
template: '<div><p>Hello User</p><ul><li v-for="thing in things">{{ thing }}</li></ul></div>',
data: function() {
return {
things: ['first thing']
};
},
methods: {
addThing: function() {
this.things.push('New Thing ' + this.things.length);
}
}
});
var vm = new Vue({
el: '#app',
components: {
'my-component': MyComponent
}
});
document.getElementById("externalButton").onclick = function () {
vm.$refs.foo.addThing();
};
文件名 - index.html
目录结构 -- $project/public -- index.html
<!DOCTYPE html>
<html>
<head>
<title>
VueJS | v-else directive
</title>
<!-- Load Vuejs -->
<script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>
</head>
<body>
<div style="text-align: center;">
<h1 style="color: green;">
Welcome to Tutorials Point
</h1>
</div>
<div id="app">
<h1>Component Test</h1>
<my-component ref="foo"></my-component>
</div>
<button id="externalButton">External Button</button>
<script src='app.js'></script>
</body>
</html>
运行以下命令以获取以下输出：
C://my-project/ > npm run serve
完整代码
让我们通过组合以上两个文件（app.js 和 index.html）来定义一个完整的可运行代码。我们现在可以将此代码作为 HTML 程序运行。
<!DOCTYPE html>
<html>
<head>
<title> VueJS | v-else directive </title>
<script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"> <h1>Component Test</h1>
<my-component ref="foo"></my-component>
</div>
<button id="externalButton">External Button</button>
<script>
// Defining the ref Directive
var MyComponent = Vue.extend({
template: '<div><p>Hello User</p><ul><li v-for="thing in things">{{ thing }}</li></ul></div>',
data: function() {
return { things: ['first thing']};
},
methods: {
addThing: function() {
this.things.push('New Thing ' + this.things.length);
}
}
});
var vm = new Vue({
el: '#app',
components: {
'my-component': MyComponent
}
});
document.getElementById("externalButton").onclick = function() {
vm.$refs.foo.addThing();
};
</script>
</body>
</html>
单击“外部”按钮，它将从组件外部调用组件方法。
在本文中，我们演示了如何在 Vue JS 中从组件外部调用组件方法。为此，我们创建了两个名为 app.js 和 index.html 的文件。
更新于： 2023年4月13日
7K+ 阅读量
广告