Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to call a VueJS component method from outside the component ?
Generally, we cannot call a Vue component method from outside the component. But we have a way to call the component from outside. We can use the Vue’s ref Directive. This metthod allows a component to be referenced from the parent for direct access.
To apply the ref Directive, we will first create a div element with id ‘app’. Once the div element is created, we can apply the ref to the element by initializing the its data.
Syntax
Following is the syntax to call a component method from outside the component in Vue.js −
<my-component ref="foo"></my-component>
Here, the component is named "my-component" and it has a "ref" attribute set to another component "foo".
Example
Create two files app.js and index.html in your Vue project. The file and directory with code snippets are given below for both files. Copy paste the below code snipped in your Vue project and run the Vue project. You shall see the below output on the browser window.
FileName - app.js
Directory Structure -- $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();
};
FileName - index.html
Directory Structure -- $project/public -- index.html
<!DOCTYPE html>
<html>
<head>
<title>
VueJS | v-else directive
</title>
<!-- Load Vuejs -->
<script src="https://cdn.jsdelivr.net/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>
Run the following command to get the below output −
C://my-project/ > npm run serve
Complete Code
Let’s define a complete working code by combining the above two files- app.js and index.html. We can now run this code as an HTML program.
<!DOCTYPE html>
<html>
<head>
<title> VueJS | v-else directive </title>
<script src="https://cdn.jsdelivr.net/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>
On clicking the External button, it will call the component method from outside the component.
In this article, we demonstrated how to call a component method from outside the component in Vue JS. To do this, we created two files named as app.js and index.html.
5K+ Views
